Javascript 多物体运动的实现

浏览数：17 / 时间：2015年06月08日

这篇文章主要介绍了Javascript 多物体运动的实现,需要的朋友可以参考下

我们先来看下之前的运动的代码，是否支持多物体运动，会出现怎么样的问题。

代码如下:

1 <style type="text/css">
2             div {
3                 width: 100px;
4                 height: 50px;
5                 background: red;
6                 margin: 10px;
7             }
8 </style>

代码如下:

1 <body>
2         <div></div>
3         <div></div>
4         <div></div>
5  </body>

以下是Javascript 代码：

代码如下:

 1 <script type="text/javascript">
 2             window.onload = function() {
 3                 var aDiv = document.getElementsByTagName(‘div‘);
 4                 for (var i = 0; i < aDiv.length; i++) {
 5                     aDiv[i].onmouseover = function() {
 6                         startMove(this, 400);
 7                     };
 8                     aDiv[i].onmouseout = function() {
 9                         startMove(this, 100);
10                     };
11                 }
12             }
13             var timer = null;
14             function startMove(obj, iTarget) {
15                 clearInterval(timer);
16                 timer = setInterval(function() {
17                     var speed = (iTarget - obj.offsetWidth) / 6;
18                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
19                     if (obj.offsetWidth == iTarget) {
20                         clearInterval(timer);
21                     } else {
22                         obj.style.width = obj.offsetWidth + speed + ‘px‘;
23                     }
24                 }, 30);
25             }
26         </script>

此时当鼠标移入到第一个div 时，他是正常运行的。但是如果现在又移动到第二个或者第三个div时候就会出现bug。

image 这个是什么原因呢？看图可以看出并没有运动完成。实际上是这样的，

整个程序就一个定时器, 比如第一个div开始动了，第二个div 鼠标移入了前一个定时器就被干掉了，那么自然就卡在那里了。

所以最大的问题就是整个程序就只有一个定时器。那么怎么解决这个问题呢？

解决方案：

其实很简单，把定时器作为一个物体的属性加上,那么每个物体都有一个定时器在，当关闭定时器的时候是关闭物体上的定时器,开也是物体上的定时器

那么他们之间就可以完全互不干扰的运行。

看下修改后的Javascript代码：

代码如下:

<script type="text/javascript">
           window.onload = function() {
               var aDiv = document.getElementsByTagName(‘div‘);
               for (var i = 0; i < aDiv.length; i++) {
                   aDiv[i].timer=null; // 把定时器作为一个物体的属性存起来
                   aDiv[i].onmouseover = function() {
                       startMove(this, 400);
                   };
                   aDiv[i].onmouseout = function() {
                       startMove(this, 100);
                   };
               }
           }
           function startMove(obj, iTarget) {
               clearInterval(obj.timer);
               obj.timer = setInterval(function() {
                   var speed = (iTarget - obj.offsetWidth) / 6;
                   speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                   if (obj.offsetWidth == iTarget) {
                       clearInterval(obj.timer);
                   } else {
                       obj.style.width = obj.offsetWidth + speed + ‘px‘;
                   }
               }, 30);
           }
       </script>

这样程序就没有问题了，能够支持多物体的运动。

下面是一个多物体运动的实例哦。

效果：

思路：

利用setInterval计时器进行运动，offsetWidth实现宽度的变动，在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动。

代码如下:

 1 <head runat="server">
 2     <title></title>
 3     <style type="text/css">
 4         div
 5         {
 6             width: 100px;
 7             height: 50px;
 8             background: #0000FF;
 9             margin: 10px;
10         }
11     </style>
12     <script type="text/javascript">
13         window.onload = function () {
14             var oDiv = document.getElementsByTagName(‘div‘);
15             for (var i = 0; i < oDiv.length; i++) {
16                 oDiv[i].timer = null;           //给买个DIV做个标记，用以关闭相应DIV的定时器
17                 oDiv[i].onmouseover = function () {
18                     move(this, 400);        //给定时器输出参数
19                 }
20                 oDiv[i].onmouseout = function () {
21                     move(this, 100);
22                 }
23             }
24         };
25         function move(div, end) {
26             clearInterval(div.timer);
27             div.timer = setInterval(function () {
28                 var speed = (end - div.offsetWidth) / 5;        //（终点-要走的宽度）/缩放系数=DIV移动的速度
29                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整，也就是进位取整
30                 if (div.offsetWidth == end) {       //当到达终点时关闭计时器
31                     clearInterval(div.timer);
32                 }
33                 else {
34                     div.style.width = div.offsetWidth + speed + ‘px‘;   //移动DIV的宽度
35                 }
36             }, 30)
37         }
38     </script>
39 </head>
40 <body>
41     <div>
42     </div>
43     <div>
44     </div>
45     <div>
46     </div>
47 </body>