Panorámica & zoom imagen usando JavaScript y CSS3 transforma-Panzoom
| Autor: | SpencerWie |
|---|---|
| Views Total: | 1,221 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 31, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Panzoom es una biblioteca de JavaScript ligera para panoramizar y acercar imágenes dentro de un contenedor utilizando eventos de arrastrar y rueda del ratón.
Además de las imágenes, la librería también funciona con elementos Canvas y SVG.
Funcionamiento
Descargue e importe la versión minimizada de la biblioteca Panzoom en el archivo HTML.
<script src="/path/to/panzoom.min.js"></script>
Inserte imágenes en la Página Web.
<img class="panzoom" src="1.jpg"> <canvas class="panzoom"> ... </canvas> <img class="panzoom" src="1.svg" type="image/svg+xml">
Aplique la funcionalidad de PanZoom a las imágenes.
PanZoom(".panzoom"); Personalice la funcionalidad de PanZoom con las siguientes opciones.
PanZoom(".panzoom", {
// min/max scale
minScale : 0.1,
maxScale : 5,
// increment step
increment
: 0.05,
// whether to zoom linearly when using increment
liner
: false
}); Registro de cambios
03/31/2019
- Se ha cambiado el ejemplo de offsetWidth y offsetHeight y DIV
08/29/2018
- Se agregó zoom para trabajar con Firefox
