méthode js pour contrôler la taille de l'image en faisant glisser les compétences slider_javascript

L'exemple de cet article décrit comment utiliser js pour faire glisser le curseur afin de contrôler la taille de l'image. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant :

<<
>>
==

<script><br> //golbal<br> var pv = nul;<br> var sd = nul;<br> window.onload=function(){<br> pv = nouveau PicView("/images/m01.jpg");<br> sd = nouveau curseur (<br> fonction(p){<br> document.getElementById("sliderBlock").innerHTML = 2*p "%";<br> pv.expand(2*p/100);<br> },function(){});<br> ><br> var PicView = fonction(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 = fonction(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=fonction(){<br> var _sx=0;<br> var _cx=0;<br> var o=this.block;<br> var moi=this;<br> o.onmousedown=fonction(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> fonction déplacement(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> moi.percent=(pos_x-13)/2;<br> moi.ing(moi.pourcent);<br> ><br> fonction up(){<br> document.body.onmousemove=function(){};<br> document.body.onmouseup=function(){};<br> ><br> ><br> </script>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.