まず、以前のモーションコード、複数のオブジェクトの動きをサポートしているかどうか、どのような問題が発生するかを見てみましょう。
コードコピーは次のとおりです。
<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>
このようにして、プログラムには問題がなく、複数のオブジェクトの動きをサポートできます。