1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
8 #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
9 #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
10 </style>
11 <script>
12 var timer=null;
13
14 function startMove(iTarget)
15 {
16 var oDiv=document.getElementById('div1');
17
18 clearInterval(timer);
19 timer=setInterval(function (){
20 var speed=0;
21
22 if(oDiv.offsetLeft<iTarget)
23 {
24 speed=7;
25 }
26 else
27 {
28 speed=-7;
29 }
30
31 if(Math.abs(iTarget-oDiv.offsetLeft)<=7) //Math.abs绝对值
32 {
33 clearInterval(timer);
34
35 oDiv.style.left=iTarget+'px';
36 }
37 else
38 {
39 oDiv.style.left=oDiv.offsetLeft+speed+'px';
40 }
41 }, 30);
42 }
43 </script>
44 </head>
45
46 <body>
47 <input type="button" value="到100" onclick="startMove(100)" />
48 <input type="button" value="到300" onclick="startMove(300)" />
49 <div id="div1"></div>
50 <div id="div2"></div>
51 <div id="div3"></div>
52 </body>
53 </html>
