<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>

　　推荐阅读

　　javascript实现的一个自定义长度的文本自动换行的函数。

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形，虽然可以使用style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 来解决这个问题，但有些时候会导致内容>>>详细阅读

本文标题：javascript动画效果类封装代码

地址：http://www.17bianji.com/kaifa2/JS/30129.html

 1/2    1