缓冲运动：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