<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <style> *{margin:0;padding:0;} #w{width:200px;height:200px;background:#ccc;overflow:hidden;position:relative;left:0px;} #w1{width:400px;height:200px;} </style> <script> window.onload=function(){ var oDiv=document.getElementById("w"); var oDiv1=document.getElementById("w1"); var oIput=document.getElementById("btn"); var oTxt=document.getElementById("txt"); var speed=0; var timer=null;//timer=setInterval(sMove,1000); /*减速运动*/ function mMove(target){ speed=(target-oDiv.offsetLeft)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft==target){ clearInterval(timer); console.log("计时器停止"+speed); }else{ oDiv.style.left=oDiv.offsetLeft+speed+"px"; console.log("speed="+speed); console.log("oDiv.offsetLeft="+oDiv.offsetLeft); } } oIput.onclick=function(){ timer=setInterval(function(){mMove(oTxt.value)},100); }; }; </script> <body> <input type="button" value="button" id="btn" /> <input type="text" id="txt" /> <div id="w"> <div id="w1"></div> </div> </body> </html>
原文：http://www.cnblogs.com/dream-w/p/4884770.html