Pertama -tama mari kita lihat kode gerak sebelumnya, apakah itu mendukung pergerakan beberapa objek, dan masalah apa yang akan muncul.
Salinan kode adalah sebagai berikut:
<type style = "text/css">
Div {
Lebar: 100px;
Tinggi: 50px;
Latar Belakang: Merah;
margin: 10px;
}
</tyle>
Salinan kode adalah sebagai berikut:
<body>
<div> </div>
<div> </div>
<div> </div>
</body>
Ini kode JavaScript:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var adiv = document.geteLementsByTagname ('div');
untuk (var i = 0; i <adiv.length; i ++) {
adiv [i] .onmouseover = function () {
startMove (ini, 400);
};
adiv [i] .onmouseout = function () {
startMove (ini, 100);
};
}
}
var timer = null;
fungsi startMove (obj, itarget) {
clearInterval (timer);
timer = setInterval (function () {
var speed = (itarget - obj.offsetWidth) / 6;
kecepatan = kecepatan> 0? Math.ceil (kecepatan): Math.floor (kecepatan);
if (obj.offsetWidth == itarget) {
clearInterval (timer);
} kalau tidak {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30);
}
</script>
Pada saat ini, ketika mouse bergerak ke div pertama, ia berjalan secara normal. Tetapi jika Anda pindah ke div kedua atau ketiga sekarang, Anda akan mendapatkan bug.
Gambar Apa alasan ini? Melihat gambarnya, Anda dapat melihat bahwa gerakan tersebut belum selesai. Sebenarnya, inilah masalahnya,
Seluruh program hanyalah timer. Misalnya, div pertama mulai bergerak, dan div kedua pindah ke timer sebelumnya dan terbunuh, sehingga secara alami akan terjebak di sana.
Jadi masalah terbesar adalah seluruh program hanya memiliki satu timer. Jadi bagaimana cara menyelesaikan masalah ini?
Larutan:
Bahkan, ini sangat sederhana. Tambahkan timer sebagai atribut suatu objek, sehingga setiap objek memiliki timer. Ketika timer dimatikan, itu adalah timer pada objek, dan timer pada objek juga merupakan timer pada objek.
Kemudian mereka dapat beroperasi tanpa gangguan satu sama lain.
Lihatlah kode JavaScript yang dimodifikasi:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var adiv = document.geteLementsByTagname ('div');
untuk (var i = 0; i <adiv.length; i ++) {
adiv [i] .timer = null; // Simpan timer sebagai properti objek
adiv [i] .onmouseover = function () {
startMove (ini, 400);
};
adiv [i] .onmouseout = function () {
startMove (ini, 100);
};
}
}
fungsi startMove (obj, itarget) {
ClearInterval (obj.timer);
obj.timer = setInterval (function () {
var speed = (itarget - obj.offsetWidth) / 6;
kecepatan = kecepatan> 0? Math.ceil (kecepatan): Math.floor (kecepatan);
if (obj.offsetWidth == itarget) {
ClearInterval (obj.timer);
} kalau tidak {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, 30);
}
</script>
Dengan cara ini, program tidak akan memiliki masalah dan dapat mendukung pergerakan beberapa objek.