这个问题与以下问题类似：在点上缩放（使用比例和平移），甚至是这样一个：图像以鼠标位置为中心进行缩放，但我不想在画布上做，而是在普通的图像（或者更确切地说是图像的容器div）上做。所以缩放应该像Google地图一样。实际上，我正在修改/增强iDangerous Swiper zoom (http://idangero.us/swiper/)，这是我的起点，这就是我目前得到的结果：https://jsfiddle.net/xta2ccdt/3/
只使用鼠标滚轮缩放。第一次缩放时它可以完美地缩放，但我无法计算出第一次缩放后每次缩放的比例。下面是我的代码：
JS：
我还发现，如果我从当前值中减去先前的translateX和translateY值，我可以在同一点上任意缩放，并且它会完美地缩放，但是如果我在一个点上缩放，然后改变鼠标位置并再次缩放，它将不再按照预期缩放。例如：https://jsfiddle.net/xta2ccdt/4/ 如果我改变鼠标位置，并计算旧鼠标位置和新鼠标位置之间的X和Y差异，并将其添加到差异计算中，第二次它将正确缩放。但第三次看起来仍然会从总计算中减去该差异，这将导致平移再次将图像移开，之后如果我们将鼠标保持在相同的位置，它将再次正确缩放。 所以我想每次计算新的“diff”时都加上旧鼠标位置和新鼠标位置之间的差异，这种方法有点行得通，当我停止添加鼠标位置差异时就不再跳动了，但它仍然不能在同一位置缩放，每次新的缩放都会使图像移动（偏移）一小部分。我认为这是因为每次都有一个新的缩放值，但偏移不是线性的，每次都越来越小，接近于零，我无法弥补这种偏移。 这是新示例：https://jsfiddle.net/xta2ccdt/5/ 示例中的新图像：旧图像不再可用：https://jsfiddle.net/xta2ccdt/14/
$(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差异，并将其添加到差异计算中，第二次它将正确缩放。但第三次看起来仍然会从总计算中减去该差异，这将导致平移再次将图像移开，之后如果我们将鼠标保持在相同的位置，它将再次正确缩放。 所以我想每次计算新的“diff”时都加上旧鼠标位置和新鼠标位置之间的差异，这种方法有点行得通，当我停止添加鼠标位置差异时就不再跳动了，但它仍然不能在同一位置缩放，每次新的缩放都会使图像移动（偏移）一小部分。我认为这是因为每次都有一个新的缩放值，但偏移不是线性的，每次都越来越小，接近于零，我无法弥补这种偏移。 这是新示例：https://jsfiddle.net/xta2ccdt/5/ 示例中的新图像：旧图像不再可用：https://jsfiddle.net/xta2ccdt/14/