<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: 0" onClick="start()"></div> </div> <p class=notice display="text-align:center">点击可移动绿色方块</p> <p id="time0"></p> <p id="time1"></p> <p id="time2"></p> </body> <script> var o_show_time0 = document.getElementById('time0'); var o_show_time1 = document.getElementById('time1'); var o_show_time2 = document.getElementById('time2'); //动画参数设置http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm //这个动画距离没有误差，但是执行的时间有误差 var Tween = { Quad: { easeOut: function(t, b, c, d) { t/=d; // t=t/d 1/100 //这样就走了100份之一 //当t等于d的时候那么他们相除就等于1 刚刚好是初始值动画和结束值相加的值 return b+c*(t); } } } //b:div之样式left初值，c:div要移动的距离，d：div在时间d内完成移动，t:时间 // d：div在时间d内完成移动 的时间是 var b=0,c=500,d=1000,t=0; function start(){ o_show_time0.innerHTML = new Date(); function Run(){ var left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)); move.style.left = left + "px"; //console.log(left) if(t<d){ t++; console.log('d='+d) console.log('t='+t) o_show_time1.innerHTML = new Date(); setTimeout(Run, 10); } } Run(); } </script> </html>