Vamos primeiro olhar para o código de movimento anterior, se ele suporta o movimento de vários objetos e quais problemas surgirão.
A cópia do código é a seguinte:
<style type = "text/css">
div {
Largura: 100px;
Altura: 50px;
Antecedentes: vermelho;
margem: 10px;
}
</style>
A cópia do código é a seguinte:
<Body>
<div> </div>
<div> </div>
<div> </div>
</body>
Aqui está o código JavaScript:
A cópia do código é a seguinte:
<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 (isto, 400);
};
adiv [i] .onMouseOut = function () {
startMove (isto, 100);
};
}
}
Var Timer = NULL;
função startMove (obj, itarget) {
ClearInterval (timer);
Timer = setInterval (function () {
var speed = (itetget - obj.offsetWidth) / 6;
velocidade = velocidade> 0? Math.CEIL (velocidade): math.floor (velocidade);
if (obj.offsetWidth == ITARGET) {
ClearInterval (timer);
} outro {
obj.style.width = obj.offsetWidth + velocidade + 'px';
}
}, 30);
}
</script>
Neste momento, quando o mouse se move para a primeira div, ele está sendo executado normalmente. Mas se você se mudar para o segundo ou terceiro div, você receberá um bug.
Imagem Qual é a razão para isso? Olhando para a foto, você pode ver que o movimento não foi concluído. Na verdade, esse é o caso,
Todo o programa é apenas um cronômetro. Por exemplo, a primeira div começa a se mover, e a segunda divide se move para o cronômetro anterior e é morta, por isso naturalmente ficará preso lá.
Portanto, o maior problema é que o programa inteiro tem apenas um cronômetro. Então, como resolver esse problema?
Solução:
De fato, é muito simples. Adicione o timer como o atributo de um objeto, para que cada objeto tenha um temporizador. Quando o temporizador é desligado, é o temporizador no objeto e o temporizador no objeto também é o temporizador no objeto.
Então eles podem operar sem interferência um com o outro.
Veja o código JavaScript modificado:
A cópia do código é a seguinte:
<script type = "text/javascript">
window.onload = function () {
var adiv = document.getElementsByTagName ('div');
for (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // salve o temporizador como a propriedade de um objeto
adiv [i] .onMouseOver = function () {
StartMove (isto, 400);
};
adiv [i] .onMouseOut = function () {
startMove (isto, 100);
};
}
}
função startMove (obj, itarget) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
var speed = (itetget - obj.offsetWidth) / 6;
velocidade = velocidade> 0? Math.CEIL (velocidade): math.floor (velocidade);
if (obj.offsetWidth == ITARGET) {
ClearInterval (obj.timer);
} outro {
obj.style.width = obj.offsetWidth + velocidade + 'px';
}
}, 30);
}
</script>
Dessa forma, o programa não terá problemas e pode apoiar o movimento de vários objetos.