Use HTML5 para realizar la función de ampliar y reducir imágenes con eventos de la rueda del mouse

Usted y yo sabemos que agregar eventos de la rueda del mouse a las páginas web HTML5 puede permitir mejor que los usuarios interactúen 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.

Consulte el efecto de demostración real

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.

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.