缓冲运动和匀速运动有点不同，看图可以知道缓冲运动速度是越来越慢的。
1 <style> 2 *{ 3 padding:0; 4 margin:10px 0; 5 } 6 #div1{ 7 height:100px; 8 width:100px; 9 background:green; 10 float:left; 11 position:relative; 12 left:1000px; 13 } 14 #div2{ 15 border-left:1px solid black; 16 position:absolute; 17 height:200px; 18 left:600px; 19 float:left; 20 } 21 </style> 22 23 24 <body> 25 <div id="div1"></div> 26 <div id="div2"></div> 27 </body>
首先定义两个div，一个div只看见一条边，另外一个做运动
js代码如下，带注释
<script>
var i=setInterval(function startMove ()
{
var div1=document.getElementById("div1");
var speed=(600-div1.offsetLeft)/30; //首先获取速度，因为div1。offsetleft=1000，所以此速度为负数
speed=speed>0?Math.ceil(speed):Math.floor(speed); //将速度上下取整，像素没有小数
div1.style.left=div1.offsetLeft+speed+'px'; //因为速度为负数，所以offsetleft越来越小，向左运动
if (div1.offsetLeft==600) //当达到div2的边时停止运动
{
clearInterval(i);
}
}
, 30)
</script>