拖动改变大小
最近一直在看js方面的书，太久没动手写，结果搞生疏了。昨天动手写了一个很常见的效果。通过拖动滑块改变元素属性，如width,height,top,left,bottom,right,fontSize
js:
function dragScale(){this.init.apply(this,arguments)};
dragScale.prototype = {
init:function(otps){
//设置默认参数
var set = {
line : 'line',
dot : 'dot',
scaleObj : 'scaleObj',
min : 0.5,
max : 2,
//设置需要改变的属性，可同时写多项，注意用驼峰式写法，如:fontSize
property :['width']
}
var _this = this;
otps = otps || {};
this.opt = this.extend(set,otps);
this.line = this.getId(this.opt.line);
this.dot = this.getId(this.opt.dot);
this.defaultValue = [];
this.isMouseDown = false;
this.scaleObj = this.getId(this.opt.scaleObj);
//滑块的移动的最大范围
this.maxRange = this.line.offsetWidth - this.dot.offsetWidth;
this.getDefaultValue();
this.addEvent(this.dot,'mousedown',function(e){_this.mousedown(e)});
},
//获取元素
getId:function(el){
return el = typeof el == 'string' ? document.getElementById(el) : el;
},
//简单的扩展
extend:function(baseObj,extendObj){
for(var i in extendObj) baseObj[i] = extendObj[i];
return baseObj;
},
//事件监听
addEvent:function(el,type,fn){
if(typeof el.addEventListener !== 'undefined'){
el.addEventListener(type,fn,false);
}else if(typeof el.attachEvent !== 'undefined'){
el.attachEvent('on'+type,function(){
fn.call(el,window.event);
})
}else{
el['on'+type] = fn;
}
},
//获取鼠标位置
getPos:function(e){
e = e || event;
if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};
return {
x:e.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
y:e.clientY + document.documentElement.scrollTop - document.body.clientTop
}
},
mousedown:function(e){
var pos = this.getPos(e),_this = this;
//每次按下的时候记录滑块的位置
var oLeft = parseInt(this.css(this.dot,'left'));
//isMouseDown用来控制滑块是否可以滑动，即鼠标按下的时候可以执行mousemove，mouseup的时候不能执行mousemove事件函数。
this.isMouseDown = true;
this.dot.style.left = oLeft + 'px';
this.addEvent(document,'mousemove',function(e){_this.mousemove(e,pos,oLeft)});
this.addEvent(document,'mouseup',function(){_this.isMouseDown = false;});
document.ondragstart = function(){return false;}
},
//获取css
css:function(o,name){
if(o.style[name]) return o.style[name];
if(o.currentStyle) return o.currentStyle[name];
if(document.defaultView) return document.defaultView.getComputedStyle(o,"")[name];
},
//获取元素的原始属性
getDefaultValue:function(){
var i=0,len=this.opt.property.length;
for(;i<len;i++){
this.defaultValue[i] = this.css(this.scaleObj,this.opt.property[i]);
}
},
mousemove:function(e,pos,oLeft){
if(!this.isMouseDown) return false;
var newPos = this.getPos(e), l = oLeft + newPos.x - pos.x,w=this.line.offsetWidth,i=0,len=this.opt.property.length;
//如果滑块不在可移动范围内，则中止mousemove事件
if(!this.inRange(l)) return false;
this.dot.style.left = l + 'px';
//设置移动距离相对属性的百分比
var percent = this.opt.min+(l/w)*(this.opt.max-this.opt.min);
for(;i<len;i++){
this.scaleObj.style[this.opt.property[i]] = parseInt(this.defaultValue[i]) * percent + 'px';
}
},
//判断滑块在不在范围内
inRange:function(n){
return 0 <= n && n <= this.maxRange;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { margin:0; padding:0;}
#line { width:400px; height:5px; background:#ddd; margin:100px auto 30px auto; position:relative;}
#dot { width:20px; height:15px; display:block; position:absolute; top:-5px; left:190px; background:#000;}
#scaleObj { font-family:Arial, Helvetica, sans-serif; font-size:11px; width:200px; border:1px solid #ddd; padding:2px; margin:0 auto; display:block;}
</style>
</head>
<body>
<div id="line"><span id="dot"></span></div>
<!--<p id="scaleObj" style="font-size:11px;">
SABAfil® ist ein synthetisches nicht-resorbierbares steriles monofiles chirurgisches Nahtmaterial. Es besteht aus Polyamid 6 oder Polyamid 6.6. Polyamid 6 wird aus gesponnenem Kunststoff gefertigt, der durch Polymerisation von e-Caprolactam hergestellt wird. Polyamid 6.6 wird aus gesponnenem Kunststoff gefertigt, der durch Polykondensation von Hexamethylendiamin und Adipinsäure hergestellt wird.
</p>-->
<img src="images/video.jpg" id="scaleObj"/>
<script type="text/javascript" src="dragScale.js"></script>
<script type="text/javascript">
new dragScale()
</script>
</body>
</html>
浙公网安备 33010602011771号