<!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:30px;
left:0;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="demo"></div>
</body>
</html>
<script>
function $id(id){return document.getElementById(id);}
var timer=null;
$id("btn").onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
$id("demo").style.left=$id("demo").offsetLeft+10+"px";
if($id("demo").offsetLeft>500)
{
clearInterval(timer);
}
},10)
}
</script>
动画实现原理：
核心原理：通过定时器 setInterval()不断移动盒子位置
实现步骤：
1，获得盒子当前位置
demo.offsetLeft
2，让盒子在当前位置加上1个移动距离
demo.style.left=demo.offsetLeft +10 +"px"
3，利用定时器不断重复这个操作
4，加一个结束定时器的条件
if(demo.offsetLeft>500) { clearInterval(timer); }
5，注意此元素需要添加定位，才能使用 element.style.left