javascript操作dom運動架構

可能名字起的有點大了。。。就是一個封起來的函數，網上也有很多了，我最早是在miaov上看到的。

var sports=function(element,options,type,callback)     {         this.init.apply(this,arguments);     }     sports.prototype={         init:function(element,options,type,callback){             this.options = options;             this.callback = callback;             this.type=type;             this.oElement = typeof element === "string" ? document.getElementById(element) : element;             this.move()         },         move:function(){             var oThis = this;             clearInterval(this.timer);             switch(this.type)             {                 case "flex":                     this.timer = setInterval(function ()                     {                         oThis.doflex();                     }, 30)                     break;                 case "buffer":                     this.timer = setInterval(function ()                     {                         oThis.dobuffer()                     }, 30)                     break;             }         },         css: function (attr, value)         {             if (arguments.length == 1)             {                 return parseFloat(this.oElement.currentStyle ? this.oElement.currentStyle[attr] : getComputedStyle(this.oElement, null)[attr])             }             else if (arguments.length == 2)             {                 attr == "opacity" ? (this.oElement.style.filter = "alpha(opacity=" + value + ")", this.oElement.style.opacity = value / 100) : this.oElement.style[attr] = value + "px"             }         },         dobuffer: function ()         {             var opt = this.options;             var bComplete = true;             for (var p in opt)             {                 var iCur = p == "opacity" ? parseInt(this.css(p).toFixed(2) * 100) : this.css(p);                 var iSpeed = (opt[p] - iCur) / 5;                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);                 opt[p] == iCur || (bComplete = false, this.css(p, iCur + iSpeed))             }             bComplete && (clearInterval(this.timer), this.callback && this.callback.call(this))         },         doflex:function(){             var opt = this.options;             var bStop = true;             for (var attr in opt)             {                 if(!this.oSpeed)this.oSpeed={};                 if(!this.oSpeed[attr])this.oSpeed[attr]=0;                 var cur = attr == "opacity" ? parseInt(this.css(attr).toFixed(2) * 100) : this.css(attr);                 if(Math.abs(opt[attr]-cur)>=1 || Math.abs(this.oSpeed[attr])>=1)                 {                     bStop=false;                     this.oSpeed[attr]+=(opt[attr]-cur)/5;                     this.oSpeed[attr]*=0.7;                     this.css(attr, cur+this.oSpeed[attr]);                 }             }             bStop && (clearInterval(this.timer), this.callback && this.callback.call(this))         }     }

 

在按鈕的click事件上直接綁上就OK了

new sports(this,{"width":500,"height":100},"flex",null);

new sports(this,{"width":500,"height":100},"buffer",null);

大家51快樂，又快上班了。。。