快捷導(dǎo)航

js用拖動(dòng)滑塊來控制圖片大小的方法

更新時(shí)間：2015年02月27日 10:07:52 作者：代碼家園

這篇文章主要介紹了js用拖動(dòng)滑塊來控制圖片大小的方法,實(shí)例分析了javascript使用鼠標(biāo)事件的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js用拖動(dòng)滑塊來控制圖片大小的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv=Content-Type content="text/html;charset=gb2312">

<title>js拖動(dòng)滑塊控制圖片顯示大小</title>

<style>

*{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;}

</style>

</head>

<body>

<div id="picViewPanel"></div>

<div id="slider">

<span id="sliderLeft" ><<</span>

<span id="sliderRight">>></span>

<span id="sliderBlock">==</span>

</div>

</body>

<script>

//golbal

var pv = null;

var sd = null;

window.onload=function(){

pv = new PicView("/images/m01.jpg");

sd = new Slider(

function(p){

document.getElementById("sliderBlock").innerHTML = 2*p +"%";

pv.expand(2*p/100);

},function(){});

}

var PicView = function(url,alt){

this.url=url;

this.obj=null;

this.alt=alt?alt:"";

this.realWidth=null;

this.realHeight=null;

this.zoom=1;

this.init();

}

PicView.prototype.init=function(){

var _img=document.createElement("img");

_img.src = this.url;

_img.alt = this.alt;

_img.style.zoom = this.zoom;

document.getElementById("picViewPanel").appendChild(_img);

this.obj=_img;

this.realWidth=_img.offsetWidth;

this.realHeight=_img.offsetHeight;

}

PicView.prototype.reBind=function(){

this.obj.style.width =  this.realWidth*this.zoom+"px";

this.obj.style.height = this.realHeight*this.zoom+"px";

//this.obj.style.zoom = this.zoom;

}

PicView.prototype.expand=function(n){

this.zoom=n;

this.reBind();

}

var Slider = function(ing,ed){

this.block=document.getElementById("sliderBlock");

this.percent = 0;

this.value = 0;

this.ing = ing;

this.ed = ed;

this.init();

}

Slider.prototype.init=function(){

var _sx=0;

var _cx=0;

var o=this.block;

var me=this;

o.onmousedown=function(e){

var e=window.event||e;

_sx = o.offsetLeft;

_cx = e.clientX-_sx;

document.body.onmousemove=move;

document.body.onmouseup=up;

};

function move(e){

var e=window.event||e;

var pos_x = e.clientX - _cx;

pos_x=pos_x<13?13:pos_x;

pos_x=pos_x>248+15-50?248+15-50:pos_x;

o.style.left =  pos_x+"px";

me.percent=(pos_x-13)/2;

me.ing(me.percent);

}

function up(){

document.body.onmousemove=function(){};

document.body.onmouseup=function(){};

}

}

</script>

</html>