Давайте сначала рассмотрим предыдущий код движения, независимо от того, поддерживает ли он движение нескольких объектов, и какие проблемы возникнут.
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
div {
Ширина: 100px;
Высота: 50px;
Фон: красный;
Маржа: 10px;
}
</style>
Кода -копия выглядит следующим образом:
<тело>
<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 timer = null;
функция startMove (obj, itarget) {
ClearInterval (таймер);
timer = setInterval (function () {
var speed = (itarget - obj.offsetwidth) / 6;
speed = speed> 0? Math.ceil (speed): math.floor (speed);
if (obj.offsetwidth == itarget) {
ClearInterval (таймер);
} еще {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</script>
В это время, когда мышь переходит в первый дивинг, она работает нормально. Но если вы переедете во второй или третий Div сейчас, вы получите ошибку.
Изображение Какова причина этого? Глядя на картинку, вы можете видеть, что движение не было завершено. На самом деле, так и так,
Вся программа - просто таймер. Например, первый Div начинает двигаться, а второй Div переходит в предыдущий таймер и убит, так что он, естественно, застрянет там.
Таким образом, самая большая проблема в том, что вся программа имеет только один таймер. Так как решить эту проблему?
Решение:
На самом деле, это очень просто. Добавьте таймер в качестве атрибута объекта, поэтому каждый объект имеет таймер. Когда таймер выключен, это таймер на объекте, а таймер на объекте также является таймером на объекте.
Затем они могут работать без помех друг с другом.
Посмотрите на измененный код 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);
};
}
}
функция startMove (obj, itarget) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
var speed = (itarget - obj.offsetwidth) / 6;
speed = speed> 0? Math.ceil (speed): math.floor (speed);
if (obj.offsetwidth == itarget) {
ClearInterval (obj.timer);
} еще {
obj.style.width = obj.offsetwidth + speed + 'px';
}
}, 30);
}
</script>
Таким образом, программа не будет иметь проблем и может поддерживать движение нескольких объектов.