点滴积累【JS】---JS小功能（JS实现匀速运动）

最新推荐文章于 2024-11-12 11:19:19 发布

weixin_33985679

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量71

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinchun/p/3449327.html

版权

效果：

思路：

利用setInerval()计时器，进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。

代码：

 1 <head runat="server">
 2     <title></title>
 3     <style type="text/css">
 4         #div1
 5         {
 6             width: 100px;
 7             height: 100px;
 8             background: #0000FF;
 9             position: absolute;
10             left: 800px;
11             top: 100px;
12         }
13         #div200
14         {
15             width: 1px;
16             height: 400px;
17             background: #FF0000;
18             position: absolute;
19             left: 200px;
20         }
21         #div500
22         {
23             width: 1px;
24             height: 400px;
25             background: #FF0000;
26             position: absolute;
27             left: 500px;
28         }
29     </style>
30     <script type="text/javascript">
31         function move(end) {
32             var oDiv = document.getElementById('div1');
33             var timer = null;
34             timer = setInterval(function () {
35                 var speed = (end - oDiv.offsetLeft) / 5;        //根据终点和offsetLeft取出运动的速度
36                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);       //进位取整，小数位变为整位，
37                 //                if (oDiv.offsetLeft <= end) {
38                 //                    clearInterval(timer);
39                 //                }
40                 //                else {
41                 //                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
42                 //                }
43                 if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙，或者说没有完全的到达指定地点，所以要小于它的速度
44                     clearInterval(timer);                       //当距离小于速度时，让计时器停止
45                     oDiv.style.left = end + 'px';           //在停止后填充缝隙。
46                 }
47                 else {
48                     oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
49                 }
50             }, 30)
51         }
52     </script>
53 </head>
54 <body>
55     <input type="button" id="btn1" value="到500的位置" onclick="move(500);" />
56     <input type="button" id="btn2" value="到200的位置" onclick="move(200);" />
57     <div id="div1">
58     </div>
59     <div id="div200">200
60     </div>
61     <div id="div500">500
62     </div>
63 </body>