缓冲运动：就是由快到慢的一个过程，距离越大，速度越大；距离越小，速度越小。也就是速度和距离成正比。
缓冲运动代码1：
1 <script> 2 function startMove() 3 { 4 var oDiv=document.getElementById('div'); 5 6 setInterval(function(){ 7 var speed=(300-oDiv.offsetLeft)/10; 8 oDiv.style.left=oDiv.offsetLeft+speed+'px'; 9 },30) 10 }; 11 </script>
这个代码是让DIV从0到300，速度由快到慢的停下来。但这个Div暂时不可能准确的停在300位置上，是因为现在速度是小数，所以我们就要用Math.ceil() 向上取整。
Math.floor() 向下取整。
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>缓冲运动</title> 6 <style> 7 #div{position:absolute;left:600px;top:100px;width:100px;height:100px;background:red;} 8 </style> 9 <script> 10 function startMove() 11 { 12 var oDiv=document.getElementById('div'); 13 14 setInterval(function(){ 15 var speed=(300-oDiv.offsetLeft)/10; 16 speed=speed>0?Math.ceil(speed):Math.floor(speed); //三目运算符 a>0?b:c 如果a大于0就运行b,否则运行c 如果速度大于0就向上取整，如果速度小于0就向下取整。 17 oDiv.style.left=oDiv.offsetLeft+speed+'px'; 18 },30) 19 }; 20 </script> 21 </head> 22 23 <body> 24 <input type="button" onclick="startMove()" value="动起来" /> 25 <div id="div"></div> 26 </body> 27 </html>