放大瞄准鼠标光标

Question

使用情况下的图像：

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

问题：

我不能环绕这样做的如何对部分我的大脑。

当前运作：

当点击一个链接，一个jQuery插件创建的风格与CSS的HTML元素的“观众”的集合。它是一个绝对定位的DIV，它包含一个IMG元素。图像缩放至100％宽度。滚动时，图像每次滚动动作增加5％。

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

变量我一直和认识：

图像的缩小比例。 图片的尺寸代表我们最近的缩放操作。 图片在我们最近的缩放操作后的新维度。 这两个维度的区别。 图像的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