Immagine di zoom JavaScript e area visibile al centro

Sto cercando di creare un’immagine in grado di zoom con un clic di un pulsante, tuttavia l’immagine dovrebbe essere centrata sull’area di visualizzazione, poiché l’immagine potrebbe essere più grande del contenitore.

Ho creato un violino qui per illustrare ciò che voglio, ovviamente ovviamente nascondo l’immagine al di fuori del contenitore, non mi preoccupo di quella parte solo ora, metto anche una sovrapposizione di bordo per mostrare i limiti del contenitore.

Ho fatto la parte dello zoom in base al rapporto immagine, ho solo bisogno di elaborare i nuovi valori css in alto e sinistra e applicarlo all’immagine dopo lo zoom. Anche l’immagine è trascinabile, quindi una volta spostata l’immagine deve prendere in considerazione la posizione dell’immagine.

Fondamentalmente, il punto centrale dell’immagine all’interno del contenitore rosso deve rimanere lo stesso dopo lo zoom, quindi si sta eseguendo uno zoom in modo efficace su qualunque cosa si trovi al centro del contenitore.

http://jsfiddle.net/wFaFg/1/

why do you we need code to link to jsfiddle? 

Grazie

modificare:

http://jsfiddle.net/FU55w/

avvicinarsi con il violino di cui sopra, ma ancora non lo zoom completamente sul punto centrale

Quindi ho trovato la soluzione,

È leggermente più complesso del semplice scoprire quanto l’immagine è aumentata di dimensioni.

Calcolo il valore x & y del punto centrale dell’immagine all’interno del contenitore, prendendo il valore sinistro e il valore superiore, rendendolo positivo e aggiungendo metà della larghezza e dell’altezza del contenitore.

 var x = Math.abs(image.position().left) + container.width() / 2 var y = Math.abs(image.position().top) + container.height() / 2 

Calcolo il rapporto della scala dell’immagine dividendo la nuova larghezza per la vecchia larghezza, quindi posso moltiplicare il valore x & y per il rapporto.

Quindi prendi la differenza tra la nuova x e la y dalla corrente a sinistra e in alto.

 image.position().left - (newX - x) image.position().top - (newY - y) 

Completa il violino: http://jsfiddle.net/phHqQ/

Prova il nuovo violino in base al tuo commento:

http://jsfiddle.net/wFaFg/6/

 $("#zoom").on("click", function(e) { var container = $("#container"); var image = $("#container img"); var curLeft = image.position().left; var curTop = image.position().top; var ratio = image.height() / image.width(); image.css({ height: image.height() + (20 * ratio), width: image.width() + (20 * ratio), left: curLeft - ((20 * ratio)/2), top: curTop - ((20 * ratio)/2) }); }); 

http://www.hklabs.org/articles/image_zooming_with_javascript

Ecco l’eccellente tutorial che ho fatto sullo stesso argomento! Usa una divisione separata con lo sfondo come parte della tua immagine. altra parte dell’immagine può essere nascosta con background-repeat: no-repeat; ora usa la proprietà background-position per spostare la tua immagine all’interno della divisione!