まず、以前のモーションコード、複数のオブジェクトの動きをサポートしているかどうか、どのような問題が発生するかを見てみましょう。
コードコピーは次のとおりです。
<style type = "text/css">
div {
幅：100px;
高さ：50px;
背景：赤;
マージン：10px;
}
</style>
コードコピーは次のとおりです。
<body>
<div> </div>
<div> </div>
<div> </div>
</body>
これがJavaScriptコードです：
コードコピーは次のとおりです。
<script type = "text/javascript">
window.onload = function（）{
var adiv = document.getElementsByTagname（ 'div'）;
for（var i = 0; i <adiv.length; i ++）{
adiv [i] .onmouseover = function（）{
StartMove（これ、400）;
};
adiv [i] .onmouseout = function（）{
StartMove（これ、100）;
};
}
}
varタイマー= null;
function startmove（obj、itarget）{
ClearInterval（タイマー）;
Timer = setInterval（function（）{
var speed =（itarget -obj.offsetwidth） / 6;
速度=速度> 0？ Math.ceil（速度）：Math.floor（speed）;
if（obj.offsetwidth == itarget）{
ClearInterval（タイマー）;
} それ以外 {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}、30）;
}
</script>
この時点で、マウスが最初のdivに移動すると、正常に実行されます。しかし、今すぐ2番目または3番目のDivに移動すると、バグが表示されます。
画像これの理由は何ですか？写真を見ると、動きが完了していないことがわかります。実際、これは事実です、
プログラム全体は単なるタイマーです。たとえば、最初のDIVが移動し始め、2番目のDIVは前のタイマーに移動して殺されます。
したがって、最大の問題は、プログラム全体にタイマーが1つしかないことです。では、この問題を解決する方法は？
解決：
実際、それは非常に簡単です。オブジェクトの属性としてタイマーを追加すると、各オブジェクトにタイマーが付いています。タイマーがオフになると、それはオブジェクトのタイマーであり、オブジェクト上のタイマーもオブジェクト上のタイマーです。
その後、互いに干渉することなく動作できます。
変更された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（これ、400）;
};
adiv [i] .onmouseout = function（）{
StartMove（これ、100）;
};
}
}
function startmove（obj、itarget）{
ClearInterval（obj.timer）;
obj.timer = setInterval（function（）{
var speed =（itarget -obj.offsetwidth） / 6;
速度=速度> 0？ Math.ceil（速度）：Math.floor（speed）;
if（obj.offsetwidth == itarget）{
ClearInterval（obj.timer）;
} それ以外 {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}、30）;
}
</script>
このようにして、プログラムには問題がなく、複数のオブジェクトの動きをサポートできます。