Kita semua telah melihat efek ini, menggunakan roda mouse untuk mencapai peningkatan atau penurunan angka dalam bentuk tertentu, atau roda gulir mengontrol kiri dan kanan tombol dan menggulir ke atas dan ke bawah. Ini semua dicapai melalui pemantauan acara JS dari roda mouse. Hari ini saya akan memperkenalkan sedikit JS sederhana mendengarkan acara roda mouse.
Acara yang berbeda di browser yang berbeda
Pertama -tama, browser yang berbeda memiliki acara gulir yang berbeda. Terutama ada dua jenis: Onmousewheel (Firefox tidak mendukung) dan Dommousescroll (hanya Firefox mendukung). Saya tidak akan menjelaskan dua acara ini secara rinci di sini. Jika Anda ingin tahu, silakan pindahkan: Mousewheel (Mousewheel) dan acara Dommousescroll.
Selain itu, mendengarkan acara perlu ditambahkan selama operasi, kode ini adalah sebagai berikut: kompatibel dengan Firefox, gunakan AddEventListener untuk mendengarkan
Salin kode sebagai berikut:/*Register Event*/
if (document.addeventListener) {
document.addeventlistener ('dommousescroll', scrollfunc, false);
} // W3C
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
JS mengembalikan nilai numerik untuk menentukan naik dan turun dari roda gulir
Kompatibilitas juga harus dipertimbangkan di browser ketika menentukan apakah roda gulir naik atau turun. Sekarang Firefox menggunakan detail di lima browser utama (yaitu, Opera, Safari, Firefox, Chrome), dan empat kategori lainnya menggunakan Wheeldelta; Keduanya hanya tidak konsisten dalam hal nilai, yang berarti artinya konsisten. Detail dan Wheeldelta hanya mengambil dua nilai masing -masing, detail hanya membutuhkan ± 3, Wheeldelta hanya mengambil ± 120, di mana angka positif direpresentasikan sebagai angka atas dan angka negatif direpresentasikan sebagai turun.
Kode spesifiknya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<label untuk = "wheeldelta"> Nilai gulir: </label> (yaitu/opera) <input type = "text" id = "wheeldelta"/>
<Label untuk = "Detail"> Nilai Gulir: (Firefox) </Label> <Input Type = "Text" ID = "Detail"/>
<type skrip = "Teks/JavaScript">
var scrollfunc = function (e) {
E = E || window.event;
var t1 = document.geteLementById ("wheeldelta");
var t2 = document.geteLementById ("detail");
if (e.wheeldelta) {// yaitu/opera/chrome
t1.value = e.wheeldelta;
} lain jika (e.detail) {// firefox
t2.value = e.detail;
}
}
/*Register Event*/
if (document.addeventListener) {
document.addeventlistener ('dommousescroll', scrollfunc, false);
} // W3C
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
</script>
Dengan menjalankan kode di atas, kita dapat melihat:
Salinan kode adalah sebagai berikut:
Di browser non -firfox, nilai yang dikembalikan oleh roda gulir yang menggulir adalah 120, dan nilai yang dikembalikan oleh pengguliran ke bawah adalah -120
Di browser Firefox, nilai yang dikembalikan oleh roda gulir yang menggulir adalah -3, dan nilai yang dikembalikan oleh pengguliran ke bawah adalah 3.
Bagian kode adalah sebagai berikut: e.wheeldelta menentukan apakah itu browser non-firfox, dan e.detail adalah browser firefox
if (e.wheeldelta) {// yaitu/opera/chrome
t1.value = e.wheeldelta;
} lain jika (e.detail) {// firefox
t2.value = e.detail;
}
PS: Di sini saya merekomendasikan alat kueri online tentang acara JS, yang merangkum jenis acara yang umum digunakan dan fungsi fungsi JS:
Daftar lengkap acara dan fungsi JavaScript:
http://tools.vevb.com/table/javascript_event