<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title></title>
<style type="text/css">
#div1{width: 100px; height: 100px; background-color: red; position:absolute; left: 900px;top: 50px;}
#div2{width: 1px;height: 300px;background-color: black; position: absolute; left: 300px;top: 0px;}
#div3{width: 1px;height: 300px;background-color: black; position: absolute; left: 800px;top: 0px;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv1 = document.getElementById('div1');
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null;
oBtn1.onclick = function()
{
startMove(300);
}
oBtn2.onclick = function()
{
startMove(800);
}
function startMove(iTarget)
{
var oDiv1 = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var speed = 0;
if (oDiv1.offsetLeft<iTarget)
{
speed = 7;
}
else
{
speed = -7;
}
if(Math.abs(iTarget-oDiv1.offsetLeft<=7))
{
clearInterval(timer);
oDiv1.style.left = iTarget+'px';
}
else
{
oDiv1.style.left = oDiv1.offsetLeft+speed+'px';
}
},30)
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="到300" />
<input id="btn2" type="button" value="到800" />
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消