本文实例讲述了js用拖动滑块来控制图片大小的方法。分享给大家供大家参考。具体实现方法如下：
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程序设计有所帮助。
