【发布时间】：2018-03-20 16:53:32
【问题描述】：
这个问题和这个问题类似：Zoom in on a point (using scale and translate) 甚至这个：Image zoom centered on mouse position 但我不想在画布上做，而是在普通图像（或者更确切地说是图像的容器 div）上做。 所以缩放应该像谷歌地图。 我实际上是在破解/增强 iDangerous Swiper 缩放 (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%;
}
我还发现如果我从当前的值中减去以前的 translateX 和 translateY 值，我可以尽可能多地放大同一点并且它会完美缩放，但是如果我放大一个点然后改变鼠标定位并再次放大，它将不再按预期放大。示例：https://jsfiddle.net/xta2ccdt/4/
如果我更改鼠标位置，并计算新旧鼠标位置之间的 X 和 Y 差异并将其添加到差异计算中，它将第二次正确缩放。但是第三次看起来仍然会从总计算中减去该差异，这将导致平移再次将图像移开，之后如果我们将鼠标保持在同一位置，它将再次正确缩放。 所以我想我每次计算新的“差异”时只添加新旧鼠标位置之间的差异，这种工作，不再像我停止添加鼠标位置差异时那样跳跃，但它仍然没有放大相同的位置，每次新的缩放都会将图像移动（偏移）少量。我认为这是因为每次都有一个新的缩放值，但偏移量不是线性的，每次都更小接近零，我不知道如何偏移偏移量。 这是新示例：https://jsfiddle.net/xta2ccdt/5/ 示例中的新图像：旧图像不再可用：https://jsfiddle.net/xta2ccdt/14/
【问题讨论】：
-
不相关但
没有结束标记。它应该自动关闭 via.placeholder.com/350x150" /> 我还必须使用诸如占位符 b/c 之类的东西，另一个图像被阻止了。由于某种原因，我无法缩小。
-
我发现这个插件似乎可以满足您的要求：jqueryscript.net/demo/…
-
顺便说一句。我最终放弃了这个并改用 panzoom：github.com/timmywil/jquery.panzoom
标签： javascript html image zooming