使用Javascript将图像缩放到鼠标光标并返回到图像的原始位置

我的应用程序的一部分要求用户能够使用鼠标滚轮放大已经位于较大容器元素中心的图像

我使用jQueryUI提供了一个手动控制缩放的滑块

使用鼠标滚轮进行缩放时，视口会进行调整，以便用户始终向鼠标光标缩放，从而在缩放功能方面提供与google maps完全相同的行为

此外，为了提供比使用css转换更好的体验，我编写了一个基于动量的平滑滚动算法，以使缩放尽可能平滑

除了一个例外，一切都很完美

要复制此问题，请在提供的JSFIDLE上执行以下步骤：

将鼠标光标移动到图像的中心

非常轻柔地将鼠标滚轮移动一个凹槽，使滑鼠滚轮接管一个窗口，将您放大一点

然后将鼠标光标移动到已稍微缩放的图像的另一点

再次放大，这次可以放大到您想要的范围

最后一路放大

您将看到缩小的图像现在放错了位置（因为平移的图像尚未删除）

我想要的行为是，一旦缩放比例设置回

1

，缩小后的图像将返回其原始位置

如果从Firebug中的图像中删除css

translate

，您将看到图像返回到正确的位置

因此，这可以通过简单的条件实现，如：

if(scale == 1){
    //remove transforms completely
}

然而，这样做将提供一个跳跃的体验，我希望图像逐渐缩小到原来的位置，因为用户缩小

值得一提的是，如果你一直放大而不移动鼠标，你会发现当你缩小时，一切都是正确的。这很简单，因为没有

translate

添加到元素变换中，只需

scale

和

transform origin

。在我的代码中，

平移

仅在使用鼠标中间缩放更改缩放位置时添加

不幸的是，我似乎无法找到解决这个问题的最佳方法

下面是一个正在工作的JSFIDLE：

提前感谢您的帮助

---

注意：我很清楚我的小提琴中有一些多余的代码，它不是特别优雅，但这只是一个快速的模型，可以帮助您理解问题。

这里没有鼠标，但有一件事很突出。为什么在第一次缩放时只缩放一个凹口？你能用两个刻痕做出同样的效果（错误的）吗？@zladuric是的，你能。。。我提到只缩放一个凹口，因为如果滚动几个凹口，最终会一直放大（达到我设定的10个限制），在这种情况下，问题不会出现。槽口的数量并不重要。只要将鼠标位置更改为1-10之间的某个位置，问题就会显现出来。