如何在网页图像（Javascript）上模拟放大镜？答案

【问题标题】：How to simulate magnifying glass on Web-page image (Javascript)?如何在网页图像（Javascript）上模拟放大镜？
【发布时间】：2011-05-01 15:46:48
【问题描述】：

Google 拥有最酷的效果——它曾经是一款吃豆人游戏，今天显然是第一届世界博览会的 160 周年纪念日，而且 Google 的徽标中有一张它的图像。他们还将鼠标变成了可以扫过图片的放大镜（金环）。

我想知道他们是怎么做到的。明明是 Javascript 的，我查看了页面源码，但不是特别可读（不足为奇）。

【问题讨论】：

【解决方案1】：

查看他们的源代码，似乎他们正在使用相当基本的技术来实现这一目标。

忽略所有嵌入的漂亮动画 gif，基本上有两个图像 - 整个场景的大图和小图。较大的图像在文档中重复三次。查看下面带注释的图像，以更好地了解缩放的工作原理。

放大圈内的部分被分成三个 div - 顶部、中间和底部。每个 div 的溢出应该被隐藏。每个 div 都相对位于缩放圈内。在鼠标移动时，将缩放圆的绝对位置更改为鼠标坐标。他们的示例还使用 CSS3 进行缩放并添加一些动画延迟。

这是一个最小的重构example。

另一个example，我们不隐藏 div 溢出以将整个事物显示为正方形。

【讨论】：

【解决方案2】：

首先，对于任何想要使用这种效果的人来说，有很多 jQuery 插件。这里只是一些：

其次，它很容易实现。只需加载全尺寸图像，但给它一个小于实际宽度的width，因此它由 CSS 缩放。然后，使用 JavaScript+CSS 创建一个与背景相同的 Div（放大镜），但将 background-position 属性更改为用户鼠标当前所在的相应缩放的 x,y 坐标。

我想还有其他方法可以做到这一点，Google 可能会采取不同的做法，但这是我想到的最明显的方法。

【讨论】：

不是那么快，那些缩放插件被裁剪成方形。方形剪裁更容易创建，因为默认情况下 div 是方形的。
是的。但是，我认为使用圆角可以做到这一点。如果它是矩形以外的任何其他形式（或带有圆角的矩形，如圆形情况），我认为这可能会困难得多。（圆角我的意思是border-radius，以及它的别名）

【解决方案3】：

访问http://codeblab.com/glass/ 获取真实示例并深入了解该技术。 Flash 和 CSS v3 具有足够的功能来构建圆形放大镜。但是，simulate-a-circle-with-overlapping-rectangles 在（许多）更多平台上工作。

（披露：codeblab.com 是我的个人爱好博客，与我在荷兰的工作有一些薄弱环节。）

【讨论】：

欢迎来到 Stack Overflow！感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。

【解决方案4】：

http://www.aplweb.co.uk/blog/js/magnifying-glass/ 有一个放大任何类型 HTML 的完整示例，包括 HTML5。也可以跨浏览器工作——尽管圆角在大多数浏览器上有点不确定——所以你将不得不使用一个盒子而不是圆形。

这里是如何工作的：

这也差不多。虽然要让它在所有浏览器上都能正常工作，但还是需要注意很多小事情。

【讨论】：

【解决方案5】：

我不知道 Google 是如何做到的，因为我所在的区域不再显示徽标；但是这种效果可以通过使用画布将放大的动画 GIF 剪辑到常规图像上来实现。或者，也可以使用 CSS 边框半径（通常用于实现圆角）创建圆形剪裁。

编辑：如果您使用 CSS 边框半径，我已经将其组合在一起以展示您需要的基本技术：http://jsfiddle.net/yjBuS/

【讨论】：

【解决方案6】：

看起来他们正在使用两张图像，一张用于徽标，一张用于缩放（缩放后的一张实际上是切片的，分别运行动画...？）他们可能会检测鼠标是否位于正常徽标上，然后显示黄色圆圈并将其附加到鼠标位置。然后显示另一张图像，将其移动到鼠标的对面。或类似的东西。

【讨论】：