Javascript 多物運動的實作_javascript技巧

我們先來看下之前的運動的程式碼，是否支援多物體運動，會出現怎麼樣的問題。

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

       

       

       

   

以下是Javascript 程式碼：

複製程式碼 程式碼如下:

            window.onload = function() {
                var aDiv = document.getElementsByTagName('div');
                for (var i = 0; i                     aDiv[i].onmouseover = function() {
                        startMove(這, 400);
                    };
                    aDiv[i].onmouseout = function() {
                        startMove(這, 100);
                    };
                }
            }
            var 計時器 = null;
            函數 startMove(obj, iTarget) {
                清除間隔（計時器）；
                計時器 = setInterval(function() {
                    var speed = (iTarget - obj.offsetWidth) / 6;
                    速率=速率> 0 ? Math.ceil(速率) : Math.floor(速率);
                    if (obj.offsetWidth == iTarget) {
                        清除間隔（計時器)；
                    } 其他 {
                        obj.style.width = obj.offsetWidth 轉速 'px';
;                     }
                }, 30);
            }
        腳本>

此時當滑鼠移動到第一個div時，他是正常運作的。但是如果現在又移動到第二個或第三個div時就會出現bug。

image這個是什麼原因呢？看圖可以看出並沒有運動完成。實際上是這樣的，

整個程式就一個計時器，例如第一個div開始動了，第二個div滑鼠移入了，前一個計時器就被幹掉了，那麼自然就卡在那裡了。

所以最大的問題就是整個程式就只有一個計時器。那要怎麼解決這個問題呢？

解：

其實很簡單，把閥門當作一個閥門的屬性加上，那麼閥門每個都有一個閥門在，當關閉閥門的時候就是關閉閥門上的閥門，打開也是閥門上的閥門

那麼他們之間就可以完全互不干擾的運作。

看下後面的Javascript程式碼：

複製程式碼程式碼如下：

這樣程式就沒有問題了，能夠支援多物體的運動。