Zoom de imagen & encuadre con interacciones de ratón-ZoomNPan
| Autor: | victornpb |
|---|---|
| Views Total: | 2,837 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 2, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
ZoomNPan es una pequeña biblioteca de JavaScript que permite acercar/alejar y panoramizar una imagen usando la rueda del ratón y el movimiento del cursor.
Funcionamiento
Cree un área de zoom/panorámica en la Página Web.
<div id="demo"> </div>
Agregue una imagen de fondo al contenedor.
#demo {
width: 460px;
height: 250px;
background-image: url(https://unsplash.it/3000/2000/?random);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
} Descargue y coloque el archivo JavaScript ' zoomnpan. js ' en la parte inferior de su página HTML.
<script src="zoomnpan.js"></script>
Inicializar la biblioteca zoomnpan y listo.
var p;
function enable(){
p = new ZoomNPan(demo);
p.minScale = 75;
}
enable(); Todos los parámetros predeterminados.
/** minimum zoom allowed (in percent) */ minScale = 30; /** maximun zoom allowed (in percent) */ maxScale = 300; /** Snap to 100% if the zoom is in +- this amount (in percent) */ snap = 9; /** invert the direction on MacOS */ invertOnMac = false;
