html>
#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;}
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
{
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)
}
}