缩放针对鼠标光标的图像

Question

用例：

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

问题：

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

当前工作：

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

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

我保留并知道的变量：

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

我可能需要的是：

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

研究完成：

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

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

Answer 1

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

• http://wayfarerweb.com/jquery/plugins/mapbox
• http://lab.gianiaz.com/jquery/gzoom

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

1. 使用javascript缩放图像http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/
2. 使用javascript来平移放大的图像
3. 在javascript http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel中捕获滚轮运动