js-Methode zum Steuern der Bildgröße durch Ziehen slider_javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie Sie mit js den Schieberegler ziehen, um die Größe des Bildes zu steuern. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

*{margin:0;padding:0;font-size:12px;}
.btn{width:50px;height:15px;cursor:pointer;}
#picViewPanel{margin:5 50 0 50px; width:328px; height:248px;overflow:auto;text-align:center;border:solid 1px #cccccc;}
#slider{margin:0 50px;height:15px;width:328px;border:1px solid #000000;position:relative;}
#sliderLeft{height:13px; width:13px;float:left;border:1px solid #cccccc;cursor:pointer;}
#sliderBlock{height:13px;width:50px;border:1px solid #cccccc;position:absolute;top:0;left:113px;cursor:pointer;background:#cccccc;text-align:center;}
#sliderRight{height:13px;width:13px;float:right;border:1px solid #cccccc;cursor:pointer;}

<<
>>
==

<script><br> //golbal<br> var pv = null;<br> var sd = null;<br> window.onload=function(){<br> pv = new PicView("/images/m01.jpg");<br> sd = neuer Slider(<br> Funktion(p){<br> document.getElementById("sliderBlock").innerHTML = 2*p "%";<br> pv.expand(2*p/100);<br> },function(){});<br> }<br> var PicView = function(url,alt){<br> this.url=url;<br> this.obj=null;<br> this.alt=alt?alt:"";<br> this.realWidth=null;<br> this.realHeight=null;<br> this.zoom=1;<br> this.init();<br> }<br> PicView.prototype.init=function(){<br> var _img=document.createElement("img");<br> _img.src = this.url;<br> _img.alt = this.alt;<br> _img.style.zoom = this.zoom;<br> document.getElementById("picViewPanel").appendChild(_img);<br> this.obj=_img;<br> this.realWidth=_img.offsetWidth;<br> this.realHeight=_img.offsetHeight;<br> }<br> PicView.prototype.reBind=function(){<br> this.obj.style.width = this.realWidth*this.zoom "px";<br> this.obj.style.height = this.realHeight*this.zoom "px";<br> //this.obj.style.zoom = this.zoom;<br> }<br> PicView.prototype.expand=function(n){<br> this.zoom=n;<br> this.reBind();<br> }<br> var Slider = function(ing,ed){<br> this.block=document.getElementById("sliderBlock");<br> this.percent = 0;<br> this.value = 0;<br> this.ing = ing;<br> this.ed = ed;<br> this.init();<br> }<br> Slider.prototype.init=function(){<br> var _sx=0;<br> var _cx=0;<br> var o=this.block;<br> var me=this;<br> o.onmousedown=function(e){<br> var e=window.event||e;<br> _sx = o.offsetLeft;<br> _cx = e.clientX-_sx;<br> document.body.onmousemove=move;<br> document.body.onmouseup=up;<br> };<br> Funktion move(e){<br> var e=window.event||e;<br> var pos_x = e.clientX - _cx;<br> pos_x=pos_x<13?13:pos_x;<br /> pos_x=pos_x>248 15-50?248 15-50:pos_x;<br> o.style.left = pos_x "px";<br> me.percent=(pos_x-13)/2;<br> me.ing(me.percent);<br> }<br> Funktion up(){<br> document.body.onmousemove=function(){};<br> document.body.onmouseup=function(){};<br> }<br> }<br> </script>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.