Cette question est similaire à celui-ci: Zoom in on a point (using scale and translate) ou même celui-ci: Image zoom centered on mouse position mais je ne veux pas le faire sur une toile, mais une image normale (ou plutôt le conteneur div de l'image). Donc, le zoom devrait être aussi google maps. Je suis en fait Hacking/amélioration de zoom iDangerous Chipeur (http://idangero.us/swiper/), et qui est mon point de départ, ce qui est ce que je suis arrivé à ce jour: https://jsfiddle.net/xta2ccdt/3/Zoom sur un point de mousewheel (en utilisant l'échelle et de traduire)
Zoom uniquement avec la molette de la souris. La première fois que vous zoomez, il zoome parfaitement, mais je n'arrive pas à comprendre comment calculer chaque zoom après le premier.
Voici mon code: JS:
$(document).ready(function(){
$("#slideContainer").on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut;
if (delta === undefined) {
//we are on firefox
delta = e.originalEvent.detail;
zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
zoomOut = !zoomOut;
} else {
zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
}
var touchX = e.type === 'touchend' ? e.changedTouches[0].pageX : e.pageX;
var touchY = e.type === 'touchend' ? e.changedTouches[0].pageY : e.pageY;
var scale = 1, translateX, translateY;
if(zoomOut){
//we are zooming out
//not interested in this yet
}else{
//we are zooming in
scale = scale + 0.5;
var dimensionMultiplier = scale - 0.5;//when image is scaled up offsetWidth/offsetHeight doesn't take this into account so we must multiply by scale to get the correct width/height
var slideWidth = $("#slide")[0].offsetWidth * dimensionMultiplier;
var slideHeight = $("#slide")[0].offsetHeight * dimensionMultiplier;
var offsetX = $("#slide").offset().left;//distance from the left of the viewport to the slide
var offsetY = $("#slide").offset().top;//distance from the top of the viewport to the slide
var diffX = offsetX + slideWidth/2 - touchX;//this is distance from the mouse to the center of the image
var diffY = offsetY + slideHeight/2 - touchY;//this is distance from the mouse to the center of the image
//how much to translate by x and y so that poin on image is alway under the mouse
//we must multiply by 0.5 because the difference between previous and current scale is always 0.5
translateX = ((diffX) * (0.5));
translateY = ((diffY) * (0.5));
}
$("#slide").css("transform", 'translate3d(' + translateX + 'px, ' + translateY + 'px,0) scale(' + scale + ')').css('transition-duration', '300ms');
});
});
HTML:
<div id="slideContainer">
<div id="slide">
<img src="http://content.worldcarfans.co/2008/6/medium/9080606.002.1M.jpg"></img>
</div>
</div>
CSS:
#slideContainer{
width:500px;
height:500px;
overflow:hidden;
}
#slide{
width:100%;
height:100%;
}
img{
width:auto;
height:auto;
max-width:100%;
}
Je me suis aussi si je soustrais translateX précédente et les valeurs translateY de la ceux en cours, je peux zoomer sur le même point autant que je veux et il va zoomer p mais si j'effectue un zoom sur un point, puis change la position de la souris et effectue un zoom avant, il ne sera plus zoomer comme il est censé le faire. Exemple: https://jsfiddle.net/xta2ccdt/4/
Si je change la position de la souris et que je calcule la différence X et Y entre l'ancienne et la nouvelle position de la souris et que j'ajoute cela dans le calcul de la différence, elle effectuera un zoom correct la deuxième fois. Mais la troisième fois, on dirait que cette différence est encore soustraite du calcul total et cela amènera le traducteur à déplacer l'image de nouveau, après quoi si nous maintenons la souris dans la même position, elle effectuera un zoom correct à nouveau. Alors j'ai pensé que je vais juste ajouter la différence entre l'ancienne et la nouvelle position de la souris chaque fois que je calcule le nouveau "diff", et ce genre de travail, il n'y a plus de saut comme si , mais il ne fait toujours pas de zoom sur la même position, avec chaque nouveau zoom il déplace (décale) l'image d'une petite quantité. Je pense que c'est parce qu'il y a une nouvelle valeur de zoom à chaque fois, mais le décalage n'est pas linéaire, il est de plus en plus petit, et je n'arrive pas à comprendre comment compenser le décalage. Voici le nouvel exemple: https://jsfiddle.net/xta2ccdt/5/ Nouvelle image dans l'exemple: ancien est plus disponible: https://jsfiddle.net/xta2ccdt/14/
non apparentés mais![]()
doesn Pas de tag de fin. Il devrait se fermer automatiquement 
J'ai aussi dû utiliser quelque chose comme un espace réservé b/c l'autre image a été bloquée. Je ne pouvais pas faire un zoom arrière pour une raison quelconque. –
J'ai trouvé cette prise qui semble faire ce que vous voulez: http://www.jqueryscript.net/demo/jQuery-Plugin-for-Image-Zoom-In-Out-With-Mousewheel-imgViewer/ – Isma
btw. J'ai fini par abandonner ceci et ai utilisé le panzoom à la place: https://github.com/timmywil/jquery.panzoom –