Zoom de imagen de lupa con eventos Hover y MouseWheel
| Autor: | libinprasanth |
|---|---|
| Views Total: | 656 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 26, 2018 |
| Licencia: | MIT |
Vista prévia
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>
