Zoom de imagen de lupa con eventos Hover y MouseWheel

Tiempo de ejecución: 30 minutos. Empezar

Autor: libinprasanth
Views Total: 656
Sitio oficial: Ir a la web
Actualizado: October 26, 2018
Licencia: MIT

Vista prévia

Zoom de imagen de lupa con eventos Hover y MouseWheel

Descripción

A vanilla JavaScript image zoomer to create a circular magnifier effect on the image that users are able to zoom in/out a part of the image with mouse hover and mouse wheel events.

Funcionamiento

Cargue el JavaScript principal al final del documento HTML.

<script src="imageZoom.js"></script>

Añada el atributo Data-zoom = "Enabled" a la imagen de destino y listo.

<div class="image-zoom">

<img src="image.jpg" data-zoom="enabled">
</div>

Personaliza la apariencia de la lente.

<div class="image-zoom">

<img src="image.jpg"




data-zoom="enabled"



 lens-width="VALUE"



 border-radius="VALUE"



 border-color="VALUE"



 border-width="VALUE">
</div>

Te puede interesar: