Schauen wir uns zunächst den vorherigen Bewegungscode an, unabhängig davon, ob er die Bewegung mehrerer Objekte unterstützt und welche Probleme auftreten werden.
Die Codekopie lautet wie folgt:
<style type = "text/css">
div {
Breite: 100px;
Höhe: 50px;
Hintergrund: Rot;
Rand: 10px;
}
</style>
Die Codekopie lautet wie folgt:
<body>
<div> </div>
<div> </div>
<div> </div>
</body>
Hier ist der JavaScript -Code:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
für (var i = 0; i <adiv.length; i ++) {
adiv [i] .onmouseover = function () {
startMove (this, 400);
};
adiv [i] .onmouseout = function () {
startMove (this, 100);
};
}
}
var timer = null;
Funktion startMove (obj, itarget) {
ClearInterval (Timer);
timer = setInterval (function () {
var speed = (itarget - obj.offsetwidth) / 6;
Geschwindigkeit = Geschwindigkeit> 0? Math.ceil (Geschwindigkeit): Math.Floor (Geschwindigkeit);
if (obj.offsetwidth == itarget) {
ClearInterval (Timer);
} anders {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</script>
Zu diesem Zeitpunkt, wenn die Maus in die erste DIV geht, läuft sie normal. Aber wenn Sie jetzt zum zweiten oder dritten Div wechseln, erhalten Sie einen Fehler.
Bild Was ist der Grund dafür? Wenn Sie sich das Bild ansehen, können Sie sehen, dass die Bewegung nicht abgeschlossen wurde. Eigentlich ist dies der Fall,
Das gesamte Programm ist nur ein Timer. Zum Beispiel beginnt sich der erste Div zu bewegen, und der zweite Div bewegt sich in den vorherigen Timer und wird getötet, sodass es natürlich dort stecken bleibt.
Das größte Problem ist also, dass das gesamte Programm nur einen Timer hat. Wie kann man dieses Problem lösen?
Lösung:
Tatsächlich ist es sehr einfach. Fügen Sie den Timer als Attribut eines Objekts hinzu, sodass jedes Objekt über einen Timer verfügt. Wenn der Timer ausgeschaltet ist, ist es der Timer auf dem Objekt, und der Timer am Objekt ist auch der Timer auf dem Objekt.
Dann können sie ohne Störung miteinander arbeiten.
Schauen Sie sich den geänderten JavaScript -Code an:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
für (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // Speichern Sie den Timer als Objekt eines Objekts
adiv [i] .onmouseover = function () {
startMove (this, 400);
};
adiv [i] .onmouseout = function () {
startMove (this, 100);
};
}
}
Funktion startMove (obj, itarget) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
var speed = (itarget - obj.offsetwidth) / 6;
Geschwindigkeit = Geschwindigkeit> 0? Math.ceil (Geschwindigkeit): Math.Floor (Geschwindigkeit);
if (obj.offsetwidth == itarget) {
ClearInterval (obj.timer);
} anders {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</script>
Auf diese Weise hat das Programm keine Probleme und kann die Bewegung mehrerer Objekte unterstützen.