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