缩放针对鼠标光标的图像

Question

用例：

用户单击一个链接，将显示一个模态窗口，其中包含一个大图像，并按比例缩小以适合该窗口。当用户向上或向下滚动鼠标滚轮时，图像会放大或缩小。图像将放大到鼠标指针指向的任何位置。

问题：

我无法全神贯注于执行此操作的方法部分。

当前工作：

单击链接后，jQuery插件将创建一个使用CSS样式的html元素“查看器”集合。这是一个绝对定位的DIV，其中包含IMG元素。图像缩放到100％宽度。滚动时，每次滚动操作将图像增加5％。

由于放大时会放大图像，因此包含的DIV（溢出：隐藏）将最终裁剪图像。该图像是可拖动的，因此您始终可以看到它的所有部分。

我保留并知道的变量：

图像的缩小比例。图片的尺寸先于我们最近的缩放操作。最近一次缩放操作后图像的新尺寸。这两个方面的差异。图像的X和Y位置。鼠标光标相对于已定位容器DIV的X和Y位置。

我可能需要的是：

我知道我需要的变量，我只是无法掌握将它们放置什么顺序以及何时使用什么运算符。数学从来都不是我的强项，语法也不是我的强项。因此，任何帮助表示赞赏。

研究完成：

我用Google搜索了很多现有的解决方案。大多数是OpenGL或Flash / ActionScript的实现，对我来说，这些都没有任何意义。我发现的几个基于javascript的示例都是出于商业目的，即使它们的源代码也被混淆或缩小了，我无法完全提取出此小功能的内部工作原理。

另外，我可能也没有正确的搜索词来找出答案。

Answer 1

您可以尝试使用现有的jQuery插件，例如MapBox或GZoom：

或者，您可以尝试自己滚动。如果执行此操作，则需要将三个部分放在一起：