这个问题是类似这样的：Zoom in on a point (using scale and translate) 甚至这一个：Image zoom centered on mouse position ，但我不想做一个画布，但一个正常的图像（或而不是图像的容器div）。 所以缩放应该是谷歌地图。 我其实黑客/增强iDangerous组队，探索变焦（http://idangero.us/swiper/），这是我的出发点，这是是我走到这一步： https://jsfiddle.net/xta2ccdt/3/放大一个鼠标滚轮点（使用规模和翻译）
变焦只可使用鼠标滚轮。第一次放大时，它会完美放大，但我无法弄清楚如何在第一次放大后计算每个缩放。
这里是我的代码： 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%;
}
我也想通了，如果我减去先前的平移X和translateY值当前的，我可以尽可能多地放大同一点，并且会缩小p但是如果我放大一个点然后改变鼠标位置并再次放大，它将不再按照它应该放大的那样缩放。例如：https://jsfiddle.net/xta2ccdt/4/
如果我改变鼠标位置，并计算新旧鼠标位置之间的X和Y差异，并将其添加到差异计算中，它将第二次正确缩放。但第三次看起来差异仍然从总计算中减去，这将导致翻译再次移动图像，之后，如果我们将鼠标放在相同的位置，它将再次正确地缩放。 所以我想我会在每次计算新的“差异”时添加旧的和新的鼠标位置之间的差异，并且这种作品不再像当我停止添加鼠标位置差异时那样跳跃，但它仍然没有放大到相同的位置，每次新的缩放都会移动（偏移）图像一小部分。我认为这是因为每次都有一个新的缩放值，但偏移量不是线性的，它每次都小于零，我无法弄清楚如何抵消偏移量。 这里是新的例子：https://jsfiddle.net/xta2ccdt/5/ 在例如新形象：一个老不再可用：https://jsfiddle.net/xta2ccdt/14/
相依但![]()
没有按没有结束标签。它应该自我关闭
我也不得不使用像占位符b/c之类的其他图像被阻止。出于某种原因，我无法缩小。 –
我发现这个插件，似乎做你想做的：http://www.jqueryscript.net/demo/jQuery-Plugin-for-Image-Zoom-In-Out-With-Mousewheel-imgViewer/ – Isma
btw。我最终放弃了这一点，并使用panzoom代替：https://github.com/timmywil/jquery.panzoom –