缓冲运动：iSpeed=(iTarget-oDiv.offsetLeft)/7;速度离目标点越远，速度越大，离目标点越近速度越小；
只支持1px是最小单位，没有0.5px。所以当iSpeed为小数时如（0.7），oDiv.style.Left=oDiv.offsetLef+iSpeed+'px';会把小数部分去掉，Div的位置永远到不了目标点；所以用Math.ceil(iSpeed);向上取值；当速度为负，则用Math.floor(iSpeed);向下取值；
<body> <input type="button" value="开始运动" onclick="startMove()" /> <div id="div1"></div> <div id="div2"></div> </body>
js:
<script> function startMove() {var oDiv=document.getElementById('div1');setInterval(function (){var speed=(300-oDiv.offsetLeft)/10;//speed=Math.floor(speed);speed=speed>0?Math.ceil(speed):Math.floor(speed);oDiv.style.left=oDiv.offsetLeft+speed+'px';document.title=oDiv.offsetLeft+','+speed;}, 30); } </script>
练习1：对联浮动
目标点:iTarget:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';
为防止目标点是小数造成div上下不停跳动，iTarget为parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop);
html
<body style="height:2000px;"> <input type="text" id="txt1" style="position:fixed; right:0; top:0;" /> <div id="div1"></div> </body>
CSS:
<style> #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;} </style>
JS:
<script> window.onscroll=function () {var oDiv=document.getElementById('div1');var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px';startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop)); };var timer=null;function startMove(iTarget) {var oDiv=document.getElementById('div1');clearInterval(timer);timer=setInterval(function (){var speed=(iTarget-oDiv.offsetTop)/4;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(oDiv.offsetTop==iTarget){clearInterval(timer);}else{document.title=iTarget;document.getElementById('txt1').value=oDiv.offsetTop;oDiv.style.top=oDiv.offsetTop+speed+'px';}}, 30); } </script>
匀速运动停止条件:
当Div的位置与目标值非常接近的时候，距离不足一步即一个速度iSpeed的时候，关闭定时器，并使div的位置等于目标值；
HTML：
<body> <input type="button" value="到100" onclick="startMove(100)" /> <input type="button" value="到300" onclick="startMove(300)" /> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body>
CSS:
<style> #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;} #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;} </style>
JS:
<script> var timer=null;function startMove(iTarget) {var oDiv=document.getElementById('div1');clearInterval(timer);timer=setInterval(function (){var speed=0;if(oDiv.offsetLeft<iTarget){speed=7;}else{speed=-7;}if(Math.abs(iTarget-oDiv.offsetLeft)<=7){clearInterval(timer);oDiv.style.left=iTarget+'px';}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}}, 30); } </script>
运动框架：1清楚定时器；clearInterval(timer);
2.设置定时器；timer=setInterval(fun,30);
3.判断速度条件；if else
4，判断运动停止条件；if else
