Javascript 缩放指向鼠标光标的图像

用例：

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

问题：

我不知道该怎么做

当前工作方式：

单击链接时，jQuery插件会创建一个html元素的“查看器”集合，这些元素使用CSS进行样式设置。它是一个绝对定位的DIV，包含一个IMG元素。图像缩放为100%宽度。滚动时，每次滚动操作图像增加5%

由于图像在放大时会放大，因此包含的DIV（overflow:hidden）最终将剪辑图像。图像是可拖动的，因此您可以始终看到它的所有部分

我保留并知道的变量：

图像的缩放比例。 在我们最近的缩放操作之前，图像的尺寸。 在我们最近的缩放操作之后，图像的新维度。 这两个维度的差异。 图像的X和Y位置。 鼠标光标相对于定位的容器DIV的X和Y位置

我可能需要的：

我知道我需要的变量，但我无法掌握它们的顺序以及何时使用什么运算符。数学从来不是我的强项，语法也不是。因此，我们非常感谢您的帮助

已完成的研究：

我在谷歌上搜索了很多现有的解决方案。大多数都是OpenGL或Flash/ActionScript的实现，对我来说毫无意义。我发现的少数几个基于javascript的示例是出于商业目的，即使在那时，它们的源代码也被模糊或缩小了，我无法正确地提取这个小功能的内部工作原理

---

另外，我可能也没有正确的搜索词来找到它。

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

或者你也可以试着自己滚。如果您这样做，则需要将以下三部分组合在一起：

使用javascript缩放图像

使用javascript可以平移放大的图像

在javascript中捕获滚轮运动

---

你能在一个或类似的演示中展示你迄今为止所做的工作吗？