Primero veamos el código de movimiento anterior, si admite el movimiento de múltiples objetos y qué problemas surgirán.
La copia del código es la siguiente:
<style type = "text/css">
div {
Ancho: 100px;
Altura: 50px;
Antecedentes: rojo;
margen: 10px;
}
</style>
La copia del código es la siguiente:
<Body>
<div> </div>
<div> </div>
<div> </div>
</body>
Aquí está el código JavaScript:
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
para (var i = 0; i <adiv.length; i ++) {
adiv [i] .onmouseover = function () {
startmove (esto, 400);
};
adiv [i] .onmouseout = function () {
startmove (esto, 100);
};
}
}
VAR TIMER = NULL;
función startmove (obj, target) {
ClearInterval (temporizador);
timer = setInterval (function () {
VAR SPEED = (ITARGET - OBJ.OFFSETWIDTH) / 6;
velocidad = velocidad> 0? Math.ceil (velocidad): Math.floor (velocidad);
if (obj.offsetwidth == target) {
ClearInterval (temporizador);
} demás {
obj.style.width = obj.OffSetWidth + Speed + 'Px';
}
}, 30);
}
</script>
En este momento, cuando el mouse se mueve hacia el primer div, se está ejecutando normalmente. Pero si te mueves al segundo o tercer DIV ahora, obtendrás un error.
Imagen ¿Cuál es la razón de esto? Mirando la imagen, puede ver que el movimiento no se ha completado. En realidad, este es el caso,
Todo el programa es solo un temporizador. Por ejemplo, el primer div comienza a moverse, y el segundo div se mueve al temporizador anterior y es asesinado, por lo que naturalmente se atascará allí.
Entonces, el mayor problema es que todo el programa solo tiene un temporizador. Entonces, ¿cómo resolver este problema?
Solución:
De hecho, es muy simple. Agregue el temporizador como el atributo de un objeto, para que cada objeto tenga un temporizador. Cuando el temporizador se apaga, es el temporizador del objeto, y el temporizador en el objeto también es el temporizador en el objeto.
Luego pueden operar sin interferencia entre sí.
Mire el código JavaScript modificado:
La copia del código es la siguiente:
<script type = "text/javaScript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
para (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // Guardar el temporizador como propiedad de un objeto
adiv [i] .onmouseover = function () {
startmove (esto, 400);
};
adiv [i] .onmouseout = function () {
startmove (esto, 100);
};
}
}
función startmove (obj, target) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
VAR SPEED = (ITARGET - OBJ.OFFSETWIDTH) / 6;
velocidad = velocidad> 0? Math.ceil (velocidad): Math.floor (velocidad);
if (obj.offsetwidth == target) {
ClearInterval (obj.timer);
} demás {
obj.style.width = obj.OffSetWidth + Speed + 'Px';
}
}, 30);
}
</script>
De esta manera, el programa no tendrá problemas y puede respaldar el movimiento de múltiples objetos.