Examinons d'abord le code de mouvement précédent, qu'il prenne en charge le mouvement de plusieurs objets et quels problèmes surviendront.
La copie de code est la suivante:
<style type = "text / css">
div {
Largeur: 100px;
hauteur: 50px;
Contexte: rouge;
marge: 10px;
}
</ style>
La copie de code est la suivante:
<body>
<div> </div>
<div> </div>
<div> </div>
</docy>
Voici le code JavaScript:
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
pour (var i = 0; i <adiv.length; i ++) {
adiv [i] .onMouseOver = function () {
Startmove (ceci, 400);
};
adiv [i] .onMouseout = function () {
Startmove (ceci, 100);
};
}
}
var timer = null;
fonction startmove (obj, itarget) {
ClearInterval (temporisateur);
timer = setInterval (function () {
var Speed = (itarget - obj.offsetWidth) / 6;
Speed = Speed> 0? Math.ceil (vitesse): math.floor (vitesse);
if (obj.offsetwidth == itarget) {
ClearInterval (temporisateur);
} autre {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</cript>
À l'heure actuelle, lorsque la souris entre dans la première div, elle fonctionne normalement. Mais si vous passez au deuxième ou au troisième div maintenant, vous obtiendrez un bug.
Image Quelle est la raison à cela? En regardant l'image, vous pouvez voir que le mouvement n'a pas été achevé. En fait, c'est le cas,
L'ensemble du programme n'est qu'une minuterie. Par exemple, le premier div commence à se déplacer, et le deuxième div se déplace dans la minuterie précédente et est tué, donc il restera naturellement coincé là-bas.
Le plus gros problème est donc que l'ensemble du programme n'a qu'un seul temporisateur. Alors, comment résoudre ce problème?
Solution:
En fait, c'est très simple. Ajoutez la minuterie comme l'attribut d'un objet, donc chaque objet a une minuterie. Lorsque la minuterie est désactivée, c'est la minuterie de l'objet et la minuterie de l'objet est également la minuterie de l'objet.
Ensuite, ils peuvent fonctionner sans interférence les uns avec les autres.
Regardez le code JavaScript modifié:
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
pour (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // Enregistrer la minuterie en tant que propriété d'un objet
adiv [i] .onMouseOver = function () {
Startmove (ceci, 400);
};
adiv [i] .onMouseout = function () {
Startmove (ceci, 100);
};
}
}
fonction startmove (obj, itarget) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
var Speed = (itarget - obj.offsetWidth) / 6;
Speed = Speed> 0? Math.ceil (vitesse): math.floor (vitesse);
if (obj.offsetwidth == itarget) {
ClearInterval (obj.timer);
} autre {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</cript>
De cette façon, le programme n'aura aucun problème et pourra soutenir le mouvement de plusieurs objets.