匀速运动停止

最新推荐文章于 2019-05-26 17:28:34 发布

转载最新推荐文章于 2019-05-26 17:28:34 发布 · 61 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/52css/archive/2013/03/15/2961034.html

 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>

转载于:https://www.cnblogs.com/52css/archive/2013/03/15/2961034.html