js用拖动滑块来控制图片大小的方法_javascript技巧

本文实例讲述了js用拖动滑块来控制图片大小的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

<<
>>
==

<script><br> //golbal<br> var pv = null;<br> var sd = null;<br> window.onload=function(){<br> pv = new PicView("/images/m01.jpg");<br> sd = new Slider(<br> function(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> function 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> function up(){<br> document.body.onmousemove=function(){};<br> document.body.onmouseup=function(){};<br> }<br> }<br> </script>

希望本文所述对大家的javascript程序设计有所帮助。