最近一直在看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,//設定需要改變的屬性，可同時寫多項，注意用駝峰式寫法，如:fontSizeproperty :['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;}},//擷取csscss: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;}}
HTML:
<!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>
要說的都寫在注釋了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
