javascript 缩放针对鼠标光标的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7257368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zooming an image aimed at the mouse cursor
提问by MHD
Use case:
用例：
User clicks a link, a modal window is displayed containing one big image, scaled down to fit this window. When the user scrolls their mousewheel up or down, the image zooms in or out. The image is zoomed at whatever location the mouse cursor is pointing.
用户单击一个链接，将显示一个包含一个大图像的模式窗口，缩小以适合该窗口。当用户向上或向下滚动鼠标滚轮时，图像会放大或缩小。图像会在鼠标光标指向的任何位置进行缩放。
Problem:
问题：
I can't wrap my brain around the how-to part of doing this.
我无法将我的大脑围绕在执行此操作的方法部分。
Current workings:
目前的工作：
When a link is clicked, a jQuery plugin creates a "viewer" collection of html elements that are styled with CSS. It's an absolute positioned DIV that contains an IMG-element. The image is scaled to 100% width. When scrolling, the image is increased by 5% per scroll action.
单击链接时，jQuery 插件会创建一个使用 CSS 样式化的 html 元素的“查看器”集合。它是一个包含 IMG 元素的绝对定位 DIV。图像被缩放到 100% 宽度。滚动时，每次滚动操作将图像增加 5%。
Because the image is scaled up whilst zooming in, the containing DIV (overflow: hidden) will eventually clip the image. The image is draggable so that you can always see all parts of it.
由于图像在放大时被放大，包含的 DIV（溢出：隐藏）最终将剪辑图像。图像是可拖动的，因此您始终可以看到它的所有部分。
Variables I keep and know:
我保留并知道的变量：
The image's scaled down ratio. The image's dimensions pre our most recent zoom action. The image's new dimensions after our most recent zoom action. The difference in these two dimensions. The X and Y position of the image. The X and Y position of the mouse cursor, relative to the positioned container DIV.
图像的缩小比例。图像的尺寸在我们最近的缩放操作之前。在我们最近的缩放操作之后图像的新尺寸。这两个维度的差异。图像的 X 和 Y 位置。鼠标光标的 X 和 Y 位置，相对于定位的容器 DIV。
What I probably need:
我可能需要的东西：
I know the variables I need, I just can't grasp in what order to put them and what operators to use when. Math never was my strong suit, neither was grammar. So any help is appreciated.
我知道我需要的变量，我只是无法掌握它们的放置顺序以及何时使用什么运算符。数学从来都不是我的强项，语法也不是。所以任何帮助表示赞赏。
Research done:
做过的研究：
I Googled a lot for existing solutions. Most were implementations of OpenGL or Flash/ActionScript, none of which make any sense to me whatsoever. The few javascript-based examples I found were for commercial purposes, and even then their source code was obfuscated or minified, and I couldn't quite extract the inner workings for this little feature properly.
我在谷歌上搜索了很多现有的解决方案。大多数是 OpenGL 或 Flash/ActionScript 的实现，对我来说没有任何意义。我发现的几个基于 javascript 的示例是用于商业目的，即便如此，它们的源代码也被混淆或缩小了，我无法完全提取这个小功能的内部工作原理。
Also, I probably don't have the correct search words to figure it out, either.
另外，我可能也没有正确的搜索词来弄清楚。
采纳答案by CodeThug
You could try to use an existing jQuery plugin, such as MapBox or GZoom:
您可以尝试使用现有的 jQuery 插件，例如 MapBox 或 GZoom：
Or you could try to roll your own. If you do this, there are a three pieces you'll need to put together:
或者你可以尝试推出自己的。如果你这样做，你需要把三个部分放在一起：
- Use javascript to scale the images in and out http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/
- Use javascript to allow you to pan the zoomed-in image
- Capture the scroll wheel movements in javascript http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
- 使用 javascript 缩放图像 http://agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/
- 使用 javascript 允许您平移放大的图像
- 在 javascript http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel 中捕获滚轮运动
