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快乐，又快上班了。。。