Menggunakan HTML5 untuk melaksanakan fungsi mengezum masuk dan keluar gambar menggunakan kemahiran tutorial roda tetikus event_html5

Anda dan saya sama-sama tahu bahawa menambahkan acara roda tetikus pada halaman web HTML5 boleh membenarkan pengguna berinteraksi dengan halaman web dengan lebih baik. Dalam HTML5, roda tetikus bukan sahaja boleh meluncurkan halaman web ke atas dan ke bawah malah, anda juga boleh bergantung padanya untuk melengkapkan lebih banyak fungsi, seperti mengezum masuk dan keluar dari satah pandangan.

Lihat kesan demonstrasi sebenar
Kebanyakan penyemak imbas menyokong acara roda tetikus, jadi anda boleh melanggan kaedah acara roda tetikus terlebih dahulu Setiap kali peristiwa dicetuskan, anda boleh mendapatkan atribut bernama wheelDelta , yang mewakili saiz roda tetikus yang baru berubah, di mana nilai positif bermakna roda meluncur ke bawah, dan nilai negatif bermakna roda meluncur ke atas. Semakin besar nilai mutlak nilai, semakin besar julat gelongsor.

Tetapi malangnya masih terdapat pelayar yang tidak menyokong acara roda tetikus. Itulah FireFox. Mozilla telah melaksanakan pemprosesan acara yang dipanggil "DOMMouseScroll", yang akan lulus parameter acara bernama acara dengan atribut perincian Walau bagaimanapun, atribut perincian ini berbeza daripada wheelDelta, ia hanya boleh mengekalkan nilai roda tetikus menatal ke bawah.

Anda harus memberi perhatian khusus kepada fakta bahawa Apple juga telah melumpuhkan tatal tetikus untuk mengawal halaman gelongsor ke atas dan ke bawah dalam pelayar Safari, tetapi fungsi ini masih digunakan seperti biasa dalam enjin webkit, jadi kod yang anda tulis tidak akan mencetuskan sebarang masalah.

Tambah kaedah pengendalian acara roda tetikus
Mula-mula kita menambah imej pada halaman web, dan kemudian kita boleh menggunakan roda tetikus untuk mengawal zum imej

Kod XML/HTMLSalin kandungan ke papan keratan

1. <img id="imej saya" src="myimage.jpg" alt="imej saya" />

Sekarang tambahkan kod pengendalian acara roda tetikus

Kod XML/HTMLSalin kandungan ke papan keratan

1. var myimage = dokumen.getElementById("myimage"); >
jika (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
4. // Firefox
5. myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false
6. }
7. // IE 6/7/8
8. else myimage.attachEvent("onmousewheel", MouseWheelHandler

Untuk menyokong pelayar yang berbeza

Dalam kes berikut, kami akan menyongsangkan nilai butiran Firefox dan mengembalikan salah satu daripada 1 atau -1

Kod XML/HTML

Salin kandungan ke papan keratan

1. Funktion MouseWheelHandler(e) {
2. // Cross-Browser-Wheel-Delta
3. var e = window.event ||. e; // alte IE-Unterstützung
4. var delta = Math.max(-1, Math.min(1, (e.wheelDelta ||. -e.detail)));

Jetzt bestimmen wir direkt den Größenbereich des Bildes. Der folgende Code legt den Breitenbereich des Bildes zwischen 50 und 800 Pixel fest

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1.  myimage.style.width = Math.max(50, Math.min(800 , myimage.width (30 * delta))) „px“; gibt false zurück;
2. }
3. Letzter Punkt: Wir geben in der Methode false zurück, um die standardmäßige Mausrad-Ereignisverarbeitung zu beenden und zu verhindern, dass die Webseite nach oben und unten verschoben wird.

Aktuelle Demonstration ansehen