マルチオブジェクトの JavaScript 実装 motion_javascript スキル

まず、前のモーション コードを見て、マルチオブジェクト モーションがサポートされているかどうか、またどのような問題が発生する可能性があるかを見てみましょう。

コードをコピーします コードは次のとおりです: div { 幅: 100px; 高さ: 50px; 背景: 赤; マージン: 10px; }

コードをコピーします コードは次のとおりです:

次は Javascript コードです:

コードをコピー

コードは次のとおりです: window.onload = function() { var aDiv = document.getElementsByTagName('div'); for (var i = 0; i aDiv[i].onmouseover = function() { startMove(this, 400); }; aDiv[i].onmouseout = function() { startMove(this, 100); }; } } var timer = null; function startMove(obj, iTarget) { clearInterval(タイマー); タイマー = setInterval(function() { var 速度 = (iTarget - obj.offsetWidth) / 6; 速度 = 速度 > 0 ? Math.ceil(速度) : Math.floor(速度); if (obj.offsetWidth == iTarget) { clearInterval(タイマー); } else { obj.style.width = obj.offsetWidth 速度 'px'; } }, 30); } この時点では、マウスが最初の div に移動しているときは正常に動作していますが、再び 2 番目または 3 番目の div に移動するとバグが発生する可能性があります。

画像 これが原因ですか? 図を参照してください。実際には何も行われません。

プログラム全体が 1 つのタイマーです。たとえば、最初の div が開始され、前のタイマーに移動した 2 番目の div のマウス マークが保留され、自然にそこに置かれます。 したがって、最大の問題は、プログラム全体にタイマーが 1 つしかないことです。この問題は解決できますか?

解法案： さらに単純に、タイマーを 1 つの物体の属性として扱うと、各物体に 1 つのタイマーがあり、現在オフになっているタイマーは、オフになっている物体上のタイマーであり、開始も物体上のタイマーです。

その間は完全に相互干渉せずに実行できます。

以下の変更後の Javascript 代コードを参照してください:

复制代码 代码如下: window.onload = function() { var aDiv = document.getElementsByTagName('div'); for (var i = 0; i aDiv[i].timer=null // タイマーをオブジェクトの属性として保存します aDiv[i].onmouseover = function() { StartMove(this, 400); }; aDiv[i].onmouseout = function() { StartMove(this, 100); }; } } function startMove(obj, iTarget) { クリア間隔 (obj.timer); obj.timer = setInterval(function() { var 速度 = (iTarget - obj.offsetWidth) / 6; 速度 = 速度 > 0 ? Math.ceil(speed) : Math.floor(speed); If (obj.offsetWidth == iTarget) { } else { obj.style.width = obj.offsetwidth速度 'px'; 以来 } }, 30); }

このようにして、プログラムは問題なく、複数のオブジェクトの移動をサポートできます。