这是对 如何在使用自己的鼠标滚轮平滑滚动时缩放到鼠标指针 的后续问题。
我正在使用CSS transforms将图像缩放到鼠标指针。 我还使用自己的平滑滚动算法来插值并为鼠标滚轮提供动量。
通过之前问题中Bali Balo的帮助，我已经完成了90％的工作。
现在您可以将图像完全缩放到鼠标指针，同时仍然具有平滑滚动效果，如下JSFiddle所示：
但是，当移动鼠标指针时，功能会受到破坏。
进一步说明，如果我在鼠标滚轮上放大一个刻度，那么图像会围绕正确的位置进行缩放。每次我在鼠标滚轮上缩小一个刻度时，此行为都会继续发生，完全按照预期。但是，如果在缩放的过程中，我将鼠标移动到不同的位置，则功能会受到破坏，我必须完全缩小以更改缩放位置。
预期的行为是在缩放过程中鼠标位置的任何更改都能正确地反映在缩放后的图像中。
控制当前行为的两个主要函数如下：
self.container.on('mousewheel', function (e, delta) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
该函数收集缩放图像当前比例下鼠标的当前位置。
然后启动我的平滑滚动算法，从而导致对每个插值调用下一个函数：
zoom: function (scale) {
var self = this;
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
var newCss = {};
for (var i = compat.length - 1; i; i--) {
newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
}
self.image.css(newCss);
self.currentscale = scale;
},
这个功能接受缩放量（1-10），并应用CSS变换，使用transform-origin重新定位图像。
尽管当图像完全缩小时选择静止鼠标位置时，它可以完美地工作；但如上所述，在部分缩放后移动鼠标光标会破坏此功能。
非常感谢能够提供帮助的任何人。