javascript – 缩放针对鼠标光标的图像
作者：互联网
使用案例：
用户单击链接,将显示包含一个大图像的模态窗口,按比例缩小以适合此窗口.当用户向上或向下滚动鼠标滚轮时,图像会放大或缩小.图像在鼠标光标指向的任何位置进行缩放.
问题：
我无法将我的大脑包围在这样做的方法部分.
目前的运作方式：
单击链接时,jQuery插件会创建一个由CSS样式化的html元素的“查看器”集合.它是一个绝对定位的DIV,包含一个IMG元素.图像缩放到100％宽度.滚动时,每个滚动动作的图像增加5％.
由于图像在放大时按比例放大,因此包含DIV(溢出：隐藏)将最终剪切图像.图像是可拖动的,因此您可以随时查看图像的所有部分.
我保留并知道的变量：
图像缩小比例.
图像的尺寸是我们最近的缩放操作之前的尺寸.
我们最近的缩放操作后图像的新尺寸.
这两个维度的差异.
图像的X和Y位置.
鼠标光标相对于定位容器DIV的X和Y位置.
我可能需要的：
我知道我需要的变量,我只是无法掌握它们的顺序以及使用什么操作符.数学从来都不是我的强项,也不是语法.所以任何帮助都表示赞赏.
研究完成：
我用Google搜索了很多现有解决方案.大多数是OpenGL或Flash / ActionScript的实现,这些都对我没有任何意义.我发现的几个基于javascript的示例是出于商业目的,即使这样,他们的源代码也被混淆或缩小,我无法正确地提取这个小功能的内部工作原理.
另外,我可能也没有正确的搜索词来解决它.
解决方法:
您可以尝试使用现有的jQuery插件,例如MapBox或GZoom：
> http://wayfarerweb.com/jquery/plugins/mapbox
> http://lab.gianiaz.com/jquery/gzoom
或者你可以尝试自己动手.如果你这样做,你需要将三件放在一起：
>使用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
标签：jquery,javascript,graphics,html,zooming 来源： https://codeday.me/bug/20190626/1294439.html