Quería hacer una rueda de ratón desplazada entre la primera y la segunda pantallas para nivelar el efecto de conmutación. Encontré muchos problemas. Más tarde, con la ayuda de KK, finalmente resolví este problema. Estaba muy feliz, así que lo grabé:
Mi código inicial se ve así:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"/> <style> div {ancho: 700px; altura: 1000px;}. Red {de fondo de fondo: rojo;}. Amarillo {Color de fondo: amarillo;} </style> </Etent> <Body> <Shiv> <Div> <Div> <Div> </div> <div> </div> <div> </div> <div> </div> </body> <script src = "../ jQuery/jquery.min.js"> </script> <script src = "test.js"> </script> </html> $ (documento) .Ready (function () {var hight = $ (Window) .Height (); // Obtenga el tamaño del área visible actualmente en la ventana del navegador // Cambia la pantalla completa después de que el mouse scrolls var scrollfunc = function (e) {var scrolltop = document.body.scrolltop || document.documentelement.scrolltop; e = e || window.event; if ((e.wheelDelta <0 || e.detail> 0) && scrollTop> = 0 && scrolltop <Height) {// desplazarse hacia abajo por diferentes navegadores $ (document.body) .Animate ({scrollTop: altura}, "ayunas"); $ (document.DocumentElement) .animate ({{scrollTop: Height}, "ayunas"); $ (document.DocumentElement) .animate ({{{scrollTop: Height}, "ayunas"); $ (document.Documentelement) .animate ({{{scrollTop: height}, "ayunas"); $ (document.documentelement) .animate ({{scrolltop: height}, "ayune");};} if ((e.wheeldelta> 0 || e.detail <0) && scrolltop> = height && scrolltop <= height+20) {// scroll hacia arriba por diferentes navegadores $ (document.body) .Animate ({scrolltop: 0}, "rápido"); $ (document.DocumentElement) .Animat if (document.addeventListener) {document.addeventListener ('Dommousescroll', scrollfunc, false);} window.onmousewheel = document.onmousewheel = scrollfunc;Probé tales códigos en IE y Firefox, pero el evento On Mousewheel siempre se activará varias veces en Google. Esto es algo extremadamente molesto. ¿Por qué se activa varias veces? Después de la depuración, descubrí que cada vez que desplazamos el mouse, siempre nos desplazamos mucho a la vez, en lugar de desplazarnos lentamente por una cuadrícula pequeña y una cuadrícula pequeña. Esto lleva a que el evento en el mouse se active muchas veces al desplazarse, y se llama a la función ScrollFunc. Cuando la función animada en la función no se ejecuta, se llamará continuamente, de modo que la barra de desplazamiento no puede bajar y la página no puede enrollar. Entonces, cambié el código JS anterior a lo siguiente:
$ (document) .Ready (function () {var tight = $ (Window) .Height (); var scrollFunc = function (e) {document.onmousewheel = undefined; var scrollTop = document.body.scrolltop || document.documentelement.scrolltop; e = e || window.event; if ((e.wheeldeltail> 0 || scrolltop> = 0 && scrolltop <Height) {$ (document.body) .animate ({scrollTop: Height}, "rápido", "lineal", function () {document.onmousewheel = scrollfunc;}); $ (document.documentElement) .Animate ({scrollTop: Height}, "faster scrollFunc;});} else if ((e.wheeldelta> 0 || e.detail <0) && scrollTop> = Height && scrolltop <= height+20) {$ (document.body) .Animate ({scrollTop: 0}, "rápido", "lineal", function () {document.onmousewheel = scrollFunc;}); $ (document.documentElement) .animate ({scrollTop: 0}, "rápido", "lineal", function () {document.onmousewheel = scrollFunc;});}}; if (document.adDeventListener) {document.adDeventListener ('dommousescroll', scrollfunc, false);} document.onmousewheel = scrollfunc;});Ok, el código ahora funciona normalmente, pero como soy un novato y el código no está escrito de manera exquisita, KK me dijo nuevamente. En su aviso, modifiqué el código redundante:
$ (documento) .Ready (function () {var Hight = $ (Window) .Height (); var Width = $ (Window) .Width (); var Body; if (navigator.useragent.indexof ("firefox")> 0 || navigator.useragent.indexof ("msie") {body = document.documentelement;} el otro} Ose {document. isfinish = true; var scrollFunc = function (e) {if (isFinish) {var scrollTop = body.scrolltop; e = e || window.event; if ((e.wheeldelta <0 || e.detail> 0) && scrolltop> = 0 && scrolltop <Height-20 E.Detail <0) && scrollTop> = Height && scrollTop <= Height+20) {scroll (0);}}}; var scroll = function (height) {isFinish = false; $ (body) .Animate ({scrollTop: Height}, "rápido", "lineal", function () {isFinish = true;});}; if (navigator.useragent.indexof ("firefox")> 0) {if (document.adDeventListener) {document.adDeventListener ('doMmousescroll', scrollFunc, false);}} else {document.onMouseWheel = scrollfunc;}});Finalmente obtuve el código para la introducción. Tengo que decir que he aprendido mucho resolviendo este problema. ¡En el futuro, debemos trabajar más duro hacia el objetivo de "escribir menos, hacer más"! ! !
Si hay algo malo en escribir, dame consejos de todos los maestros, y aprenderé humildemente.