javascript - 缩放瞄准鼠标光标的图像

Question

用例:

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

问题:

我无法全神贯注于操作方法部分。

当前工作:

单击链接时，jQuery 插件会创建一个使用 CSS 设置样式的 html 元素的“查看器”集合。它是一个包含 IMG 元素的绝对定位 DIV。图像缩放为 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