Seperti penangkapan tombol keyboard, kita dapat menggunakan mouse untuk mengawali animasi apa pun. Apa yang dilakukan kode berikut adalah menciptakan hyperlink, yang jika ditekan, akan menggerakkan balok. Ketika Anda melepaskan link, pergerakan dihentikan.
Scriptnya tidak baru. Kita memerlukan sebuah variabel aktif di sini lagi, dan fungsi pergerakannya merupakan salinan fungsi sebelumnya:
function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.active = false } function slide() { if (block.active) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }
Kuncinya adalah apa yang saya lakukan dengan hyperlinknya:
<A HREF="javascript:void(null)" onMouseDown="block.active=true; slide(); return false;" onMouseUp="block.active=false" onMouseOut="block.active=false">move</A>
onMouseDown memberi nilai true kepada variabel aktif, dan kemudian memanggil fungsi slide() yang memulai animasi kita. Ketika link tetap dipegang, tidak ada yang berubah. Pergerakan terus dilakukan hingga Anda melepaskan hyperlink tersebut dan dengan demikian mengeksekusi apa pun yang ada di handler onMouseUp. Variabel aktifnya dijadikan false sehingga pergerakan berhenti.
onMouseOut juga mengatur variabel aktif menjadi false untuk menghindari kesalahan. Saya menemukan bahwa jika ANda memindahkan mouse ke luar link dan kemudian melepaskan tombolnya, animasi tidak akan berhenti ini karena Anda tidak mengeksekusi MouseUp di atas link tersebut. Tetapi jika Anda menyertakan onMouseOut hal ini dapat diatasi.
Klik di sini untuk melihat contoh ini.
Halaman Muka | Pelajaran Berikutnya: Mengubah Gambar |