前面讲述的动画速度都是匀速的，现实生活中的运动速度的变化不一定是恒定的，存在一定的缓冲，就像火车进站一样，速度会越来越慢。
对于改变速度措施，其实只要将动画第一课的程序稍微的改变一下就可以了，我们来看一下代码如何实现的
html
<!DOCTYPE html> <html> <head> <title>js动画事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <div id="div1"> <span id="sp1">分享</span> </div> </body> </html>
css
*{ margin:0px; padding:0px; } #div1{ width:200px; height:200px; position:absolute; left:-200px; background:red; border:1px solid #eeddcc; } #sp1{ display:block; width:20px; height:80px; position:absolute; left:200px; top:60px; border:1px solid red; color:#036; line-height:40px; }
js
var timer; window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ RunPlay(0); } div1.onmouseout=function(){ RunPlay(-200); } } function RunPlay(target){ var div1=document.getElementById("div1"); clearInterval(timer); var speed=10; timer=setInterval(function(){ if(target>div1.offsetLeft){ speed=Math.ceil((target-div1.offsetLeft)/10);//缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，此外一定要注意，这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。 }else{ speed=Math.floor((target-div1.offsetLeft)/10); } if(div1.offsetLeft==target){ alert(speed); clearInterval(timer); }else{ div1.style.left=div1.offsetLeft+speed+"px"; } },50) }