Javascript 如何在使用我自己的鼠标滚轮平滑滚动时缩放到鼠标指针？

我的应用程序的一部分包含类似于谷歌地图的功能，用户应该能够放大和缩小容器中的图像

就像谷歌地图一样，我希望用户能够滚动鼠标滚轮，并且图像上的像素始终保持在鼠标指针的正下方。因此，基本上用户将缩放到鼠标指针所在的位置

对于缩放/翻译，我使用css转换，如下所示：

可见的

   $('#image').css({
            '-moz-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-moz-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-webkit-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-webkit-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-o-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-o-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              '-ms-transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            '-ms-transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px',
              'transform': 'scale(' + ui.value + ') translate(' + self.zoomtrans.xNew + 'px, ' + self.zoomtrans.yNew + 'px)',
            'transform-origin' : self.zoomtrans.xImage + 'px ' + self.zoomtrans.yImage + 'px'
            });

我已经设法找到了各种实现方法来实现这一点，但是我正在使用自滚动平滑滚动技术来插入鼠标事件并提供动力

事实证明，试图让两者正确地协同工作是很麻烦的

我没有在这里粘贴一大堆代码，而是创建了一个JSFIDLE，其中包括鼠标滚轮平滑滚动技术以及我目前为止使用的缩放功能

这基本上是我的应用程序这一部分的完整功能演示

如果滚动鼠标滚轮，您将看到jqueryui滑块插值并正确提供动量/减速。但是，缩放没有正确反应

如果您只滚动鼠标滚轮一个点，缩放效果会很好，但任何进一步的滚动都不起作用。我认为这是因为图像的比例现在已经改变，导致计算不正确。我试图弥补这一点，但迄今为止没有任何运气

总之，我想修改jsFiddle中的代码，以便图像始终直接缩放到鼠标指针

---

非常感谢所有愿意帮助的人

通过css3转换，您可以更轻松地完成此任务。
例如：
主要的鼠标中心算法如下所示：

//Center the image if it's smaller than the container
if(scale <= 1)
{
    currentLocation.x = im.width() / 2;
    currentLocation.y = im.height() / 2;
}
else
{
    currentLocation.x += moveSmooth * (mouseLocation.x - currentLocation.x) / currentScale;
    currentLocation.y += moveSmooth * (mouseLocation.y - currentLocation.y) / currentScale;
}

---

我还删除了CSS转换。我认为实现平滑滚动的最佳方法是使用

requestAnimationFrame

创建动画循环，而不是直接在

zoom

函数中更改值，在循环中存储值并为它们设置动画。

尽管jSFiddles中的行为与我的行为不完全相同，但它确实是朝着正确方向迈出的一步，应该足以让我达到我想要的目的。谢谢你的回答：）干得好，伙计。我使用了您的解决方案，还实现了拖动图像。代码相当大，但效果很好@卢卡斯·加西亚很好！干得好。@gordyr差不多两年后，我终于更新了这个答案。我想你不再需要它了，但我认为这个版本更接近你想要的：）虽然你说我不再需要它是正确的（我最终玩了你的答案，直到我偶然发现了我真正需要的东西），但你花时间写这篇文章真是太好了。我应该做的事。再次感谢你的帮助！

var factor = 1 - newScale / currentScale;
currentLocation.x += (mouseLocation.x - currentLocation.x) * factor;
currentLocation.y += (mouseLocation.y - currentLocation.y) * factor;