<html> <head> <title> javaScript缓动入门 </title> </head> <body> <style type=text/css> #taxiway { background: #e8e8ff; 800px; height: 100px } #move { background: #a9ea00; 100px; height:98px; border:1px solid red } </style> <div id="taxiway"> <div id="move" style="position: absolute; left: 50" onClick="Run()"></div> </div> <p class=notice display="text-align:center">点击可移动绿色方块</p> </body> <script> var Tween = { Quad: { easeOut: function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; } } } //b:div之样式left初值，c:div要移动的距离，d：div在时间d内完成移动，t:时间 var b=50,c=650,d=100,t=0; function Run(){ move.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px"; if(t<d){ t++; setTimeout(Run, 10); } } </script> </html>