Saya ingin membuat roda mouse gulir antara layar pertama dan kedua untuk menyamakan efek switching. Saya mengalami banyak masalah. Kemudian, dengan bantuan KK, saya akhirnya menyelesaikan masalah ini. Saya sangat senang, jadi saya merekamnya:
Kode awal saya terlihat seperti ini:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <tyle> div {width: 700px; tinggi: 1000px;}. Red {latar belakang: red;}. </div> <div> </div> <div> </div> <div> </div> </body> <script src = "../ jQuery/jQuery.min.js"> </script> <script src = "test.js"> </script> </ html> $ (dokumen) .ready (function () {var height = $ (window) .height (); // dapatkan ukuran area yang saat ini terlihat di jendela browser // sokang seluruh layar setelah mouse scrolls var scrollfunc = function (e) {var scrolltop = document.body.scrolltop || document.documentelement. window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <height) {// gulir ke bawah oleh browser yang berbeda $ (document.body) .animate ({scrolltop: height}, "fast"); $ (document.body) .documentelement) .seprolleme (everopop: {{fast "); $ (document.document. if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = tinggi && scrolltop <= tinggi+20) {// gulir ke atas oleh browser yang berbeda $ (document.body) .animate ({scrolltop: 0}, "cepat"); $ (document.body.documentelement) if (document.addeventlistener) {document.addeventlistener ('dommousescroll', scrollfunc, false);} window.onmousewheel = document.onmousewheel = scrollfunc;Saya menguji kode -kode seperti itu di IE dan Firefox, tetapi acara Onmousewheel akan selalu dipicu beberapa kali di bawah Google. Ini adalah hal yang sangat menjengkelkan. Mengapa dipicu beberapa kali? Setelah debugging, saya menemukan bahwa setiap kali kami menggulir mouse, kami selalu banyak menggulir sekaligus, alih -alih menggulir perlahan dengan satu kisi kecil dan satu kisi kecil. Ini mengarah ke peristiwa Onmousewheel yang dipicu berkali -kali ketika menggulir, dan fungsi scrollfunc dipanggil. Ketika fungsi animate dalam fungsi tidak dieksekusi, itu akan dipanggil terus menerus, sehingga scrollbar tidak dapat digulung dan halaman tidak dapat digulung. Jadi, saya mengubah kode JS di atas menjadi berikut:
$ (dokumen) .ready (function () {var height = $ (window) .height (); var scrollfunc = function (e) {document.onmouseWheel = tidak terdefinisi; var scrolltop = document.body.scrolltop || document.documentelement.scrolltop; e = e = window.| scrolltop> = 0 && scrolltop <height) {$ (document.body) .animate ({scrolltop: height}, "fast", "linear", function () {document.onmouseWheel = scrollfunc;}); $ (document.documentelement) .anime ({{{{{{{{{{{{{{{scrolltop {document {document "); = scrollfunc;});} else if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height+20) {$ (document.body) .animate ({scrolltop: 0}, "fast", "linear", function () {document.onm scrollfunc;}); $ (document.documentElement) .animate ({scrolltop: 0}, "fast", "linear", function () {document.onmousewheel = scrollfunc;});}}; if (document.addeventlistener) {document.addeventListener ('dommousescroll', scrollfunc, false);} document.onmouseWheel = scrollfunc;});Ok, kodenya sekarang berfungsi secara normal, tetapi karena saya seorang novis dan kodenya tidak cukup ditulis dengan indah, saya diberitahu oleh KK lagi. Pada promptnya, saya memodifikasi kode yang berlebihan:
$(document).ready(function(){var height = $(window).height();var width = $(window).width();var body;if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){body = document.documentElement;}else{body = document.body;}var isFinish = true; var scrollfunc = function (e) {if (isFinish) {var scrolltop = body.scrolltop; e = e || e.detail<0) && scrollTop>=height && scrollTop<=height+20){scroll(0);}}};var scroll = function(height){isFinish = false;$(body).animate({scrollTop:height},"fast","linear",function(){isFinish = true;});}; if (navigator.useragent.indexof ("firefox")> 0) {if (document.addeventlistener) {document.addeventlistener ('dommousescroll', scrollfunc, false);} {document.onmouseReel = scrollfunc, false);Akhirnya mendapatkan kode untuk pengantar. Saya harus mengatakan bahwa saya telah belajar banyak dengan menyelesaikan masalah ini. Di masa depan, kita harus bekerja lebih keras menuju tujuan "menulis lebih sedikit, melakukan lebih banyak"! Lai Lai
Jika ada yang salah dengan menulis, tolong beri saya nasihat dari semua tuan, dan saya akan belajar dengan rendah hati.