Introducción al artículo de Wulin.com (www.vevb.com): ¿Cómo utiliza HTML5 eventos de la rueda del mouse?
Agregar eventos de la rueda del mouse a las páginas web HTML5 puede permitir mejor a los usuarios interactuar con las páginas web. En HTML5, la rueda de desplazamiento del mouse no solo puede deslizarse hacia arriba y hacia abajo de la página web. De hecho, también puede confiar en esto para completar más funciones, como ampliar y reducir el plano del campo de visión.
La mayoría de los navegadores admiten eventos de la rueda del mouse, por lo que puede suscribirse al método del evento de la rueda del mouse primero. Cada vez que se activa el evento, puede obtener una propiedad llamada Wheeldelta, que representa el tamaño de la rueda del mouse que acaba de cambiar. Un valor positivo indica que la rueda de desplazamiento se desliza hacia abajo, y un valor negativo indica que la rueda de desplazamiento se desliza hacia arriba. Cuanto mayor sea el valor absoluto del valor, mayor será el rango deslizante.
Desafortunadamente, todavía hay un navegador que no admite eventos de la rueda del mouse. Eso es Firefox. Mozilla ha implementado el procesamiento de un evento llamado DommousesCroll, que pasará un parámetro de evento llamado evento con una propiedad llamada Detalle. Sin embargo, esta propiedad detallada es diferente de Wheeldelta, que solo puede devolver valores positivos, es decir, solo puede insistir en el valor de la rueda del mouse desplazándose hacia abajo.
Debe prestar especial atención a que Apple también desactivó el desplazamiento del mouse para controlar la página deslizándose hacia arriba y hacia abajo en el navegador Safari, pero esta función todavía se usa normalmente en el motor WebKit, por lo que el código que escribe no activará ningún problema.
Agregar método de manejo de eventos de la rueda del mouse
Primero, agregamos una imagen a la página web, y podemos usar la rueda del mouse para controlar el zoom de esta imagen más adelante.
<img id = myImage src = myImage.jpg alt = mi imagen />
Ahora agregue el código de procesamiento del evento de la rueda del mouse
var myImage = document.getElementById (myImage);
if (myImage.adDeventListener) {
// IE9, Chrome, Safari, Opera
myImage.AdDeventListener (mousewheel, mousewheelhandler, falso);
// Firefox
myImage.AdDeventListener (Dommousescroll, MouseWheelhandler, falso);
}
// es decir, 6/7/8
else MyImage.attachevent (Onmousewheel, Mousewheelhandler);
Prácticas de procesamiento que pueden ser respaldadas por diferentes navegadores
En el siguiente caso, inverso el valor detallado de Firefox y devolveremos uno de 1 o -1
function mousewheelhandler (e) {
// Delta de rueda de navegador cruzado
var e = window.event || mi; // Soporte antiguo, es decir,
var delta = Math.max (-1, Math.min (1, (E.Wheeldelta || -e.detail)));
Ahora decidimos directamente el rango de tamaño de la imagen. El siguiente código establece el rango de ancho de la imagen entre 50 y 800 píxeles
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * delta))) + px;
devolver falso;
}
Último punto, devolvemos False en el método para finalizar el procesamiento estándar del evento de la rueda del mouse en caso de que se deslice hacia arriba y hacia abajo de la página web.