<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
#demo{
100px;
height:100px;
background-color: pink;
position:absolute;
top:40px;
left:0;
}
</style>
</head>
<body>
<button id="button300">300</button>
<button id="button600">600</button>
<div id="demo"></div>
</body>
</html>
<script>
function $id(id){return document.getElementById(id);}
var timer=null;
$id("button300").onclick=function(){
run($id("demo"),300);
}
$id("button600").onclick=function(){
run($id("demo"),600);
}
function run(obj,target){ //obj是做动画的对象，（这里是demo),target是走的距离
obj.timer=setInterval(function(){
obj.style.left=obj.offsetLeft+10+"px";
if(obj.offsetLeft>target)
{
clearInterval(obj.timer);
}
},10)
}
</script>