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 :
js faites glisser le curseur pour contrôler la taille d'affichage de l'image
<<
>>
==
<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.