Todos hemos visto estos efectos, usando la rueda del mouse para lograr el aumento o disminución del número en una determinada forma, o la rueda de desplazamiento controla la izquierda y la derecha de un botón y se desplaza hacia arriba y hacia abajo. Todos estos se logran a través del monitoreo de eventos de JS de la rueda del mouse. Hoy presentaré un poco de JS simple escuchando los eventos de la rueda del mouse.
Diferentes eventos en diferentes navegadores
En primer lugar, diferentes navegadores tienen diferentes eventos de desplazamiento. Hay principalmente dos tipos: On Mousewheel (Firefox no es compatible) y DommousesCroll (solo Firefox soporta). No explicaré estos dos eventos en detalle aquí. Si quieres saber, muévete: los eventos de mousewheel (rueda de ratón) y Dommousescroll.
Además, la escucha de eventos debe agregarse durante la operación, el código es el siguiente: compatible con Firefox, use AddEventListener para escuchar
Copie el código de la siguiente manera:/*Evento de registro*/
if (document.addeventListener) {
document.addeventListener ('Dommousescroll', scrollfunc, falso);
} // w3c
Window.onmousewheel = document.onmousewheel = scrollfunc; // ie/ópera/chrome
JS Devuelve el valor numérico para determinar la arriba y hacia abajo de la rueda de desplazamiento
La compatibilidad también debe considerarse en el navegador al determinar si la rueda de desplazamiento está hacia arriba o hacia abajo. Ahora Firefox usa detalles en los cinco navegadores principales (es decir, ópera, safari, Firefox, Chrome), y las otras cuatro categorías usan Wheeldelta; Los dos solo son inconsistentes en términos de valores, lo que significa que el significado es consistente. Los detalles y la casa de ruedas solo toman dos valores cada uno, el detalle solo toma ± 3, Wheeldelta solo toma ± 120, donde los números positivos se representan como UP y los números negativos se representan como abajo.
El código específico es el siguiente:
La copia del código es la siguiente:
<etiqueta for = "wheeldelta"> Valor de desplazamiento: </etiqueta> (es decir/opera) <input type = "text" id = "wheeldelta"/>
<Label para = "Detalle"> Valor de desplazamiento: (Firefox) </label> <input type = "text" id = "detalle"/>
<script type = "text/javaScript">
var scrollFunc = function (e) {
E = E || Window.event;
var t1 = document.getElementById ("Wheeldelta");
var t2 = document.getElementById ("detalle");
if (e.wheeldelta) {// ie/ópera/Chrome
t1.value = E.Wheeldelta;
} else if (e.detail) {// Firefox
T2.Value = E.Detail;
}
}
/*Registrarse Evento*/
if (document.addeventListener) {
document.addeventListener ('Dommousescroll', scrollfunc, falso);
} // w3c
Window.onmousewheel = document.onmousewheel = scrollfunc; // ie/ópera/chrome
</script>
Al ejecutar el código anterior, podemos ver:
La copia del código es la siguiente:
En los navegadores no FireFox, el valor devuelto por el desplazamiento de la rueda de desplazamiento hacia arriba es de 120, y el valor devuelto por el desplazamiento hacia abajo es -120
En el navegador Firefox, el valor devuelto por el desplazamiento de la rueda de desplazamiento hacia arriba es -3, y el valor devuelto por el desplazamiento hacia abajo es 3.
La parte del código es la siguiente: E.Wheeldelta determina si se trata de un navegador que no es de Firefox, y E.Detail es un navegador Firefox
if (e.wheeldelta) {// ie/ópera/Chrome
t1.value = E.Wheeldelta;
} else if (e.detail) {// Firefox
T2.Value = E.Detail;
}
PD: Aquí recomiendo una herramienta de consulta en línea sobre eventos JS, que resume los tipos de eventos y funciones de funciones de JS de uso común:
Una lista completa de eventos y funciones de JavaScript:
http://tools.vevb.com/table/javascript_event