[javascript]代码库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单物体运动框架</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left:800px;
top: 50px;
}
#div2{
width: 1px;
height: 300px;
background: black;
position: absolute;
left: 200px;
top: 0;
}
#div3{
width: 1px;
height: 300px;
background: black;
position: absolute;
left: 500px;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="到200" onclick="startMove(200)" />
<input type="button" value="到500" onclick="startMove(500)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script type="text/javascript">
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(iTarget>oDiv.offsetLeft){
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>
</body>
</html>