Zoom de imagen basado en lienzo & biblioteca pan JS-Wheelzoom

Vista prévia

Descripción

Este es un JavaScript puro del plugin de jQuery < a href = "http://www.jqueryscript.net/zoom/Minimal-jQuery-Image-Zooming-Plugin-Wheelzoom.html" > Wheelzoom que proporciona las funcionalidades de ' rueda del ratón para hacer zoom ' y ' arrastrar a pan ' en una imagen. Basado en el lienzo de HTML5 y tiene soporte de manejo de eventos.

Funcionamiento

Coloque el archivo JavaScript wheelzoom. js justo antes de la etiqueta body de cierre.

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

Inicializa el Wheelzoom con las opciones predeterminadas en tus imágenes dentro del documento.

demo = wheelzoom(document.querySelectorAll('img'));

Establezca el nivel de zoom inicial/máximo:

demo = wheelzoom(document.querySelectorAll('img'),{



 zoom: 0.10,



 maxZoom: -1
});

Identificadores de eventos:

demo.addEventListener('wheelzoom.in', function(e) {

// when zoom in
});

demo.addEventListener('wheelzoom.out', function(e) {

// when zoom out
});

demo.addEventListener('wheelzoom.dragstart', function(e) {

// when drag start
});

demo.addEventListener('wheelzoom.drag', function(e) {

// when dragged
});

demo.addEventListener('wheelzoom.dragend', function(e) {

// when drag end
});

demo.addEventListener('wheelzoom.reset', function(e) {

// when reset
});

demo.addEventListener('wheelzoom.destroy', function(e) {

// when destroy
});