<input id=output3 style="position:absolute;top:300;left:300;"/> <input id=output1 /> <input id=output2 /> <br/> <input id=output4 /> <script> function Animation(target,targetProperty,closure,precision) {   closure=closure||function(x){return x;};   precision=precision||10;   this.handle;   var beginTime=new Date();   var stopTime=new Date();   this.Begin=function(){     beginTime=new Date();     this.handle=setInterval(       function(){         var now=new Date();         target[targetProperty]=closure(now.getTime()-beginTime.getTime());       },       precision     );        }   this.Continue=function(){     var now=new Date();     beginTime.setTime(now.getTime()-stopTime.getTime()+beginTime.getTime());     this.handle=setInterval(       function(){         var now=new Date();         target[targetProperty]=closure(now.getTime()-beginTime.getTime());       },       precision     );   }   this.Stop=function(duration){     clearInterval(this.handle);     if(duration===undefined)     {       stopTime=new Date();       duration=stopTime.getTime()-beginTime.getTime();     }     else stopTime.setTime(beginTime.getTime()+duration)     target[targetProperty]=closure(duration);   } } function StoryBoard(Duration,onfinish,flag) {   onfinish=onfinish||function(){};   var r=new Array();   r.appendAnimation=function(animation)   {     if(animation instanceof Animation)       this.push(animation);   }   r.removeAnimation=function(animation)   {     for(var i=0;i<r.length;i++)     {       if(r[i]==animation)       {         r.splice(i,1);         break;       }     }   }   r.start=function(){         for(var i=0;i<r.length;i++)     {       r[i].Begin();     }     setTimeout(       function(){         for(var i=0;i<r.length;i++)         {           r[i].Stop(Duration);         }       },       Duration     );     onfinish();   }   return r; } //////////////////////////////下面是使用方法//////////////////////////////// function $(id) {    return document.getElementById(id); } var a1=new Animation($("output1"),"value"); var a2=new Animation($("output2"),"width",function(x){return Math.floor(x/10);}); var a3=new Animation($("output3").style,"filter",function(x){return "alpha(opacity="+Math.floor(x/5000*100)+")";}); var a4=new Animation($("output4").style,"width",function(x){return Math.floor(x*x*x/50000/5000)+"px";}); var s=new StoryBoard(5000); s.appendAnimation(a1); s.appendAnimation(a2); s.appendAnimation(a3); s.appendAnimation(a4); s.start(); </script> <pre> output1是改变value output1是改变宽度 output3是淡入 output4是带缓动的宽度 </pre>