<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>