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

How to simulate magnifying glass on Web-page image (Javascript)?

提问by John C

Google has the coolesteffects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They alsoturn the mouse into a magnifying glass that can sweep over the picture (the gold ring).

谷歌有最酷的效果——曾经是吃豆人游戏，今天显然是第一届世界博览会160周年，谷歌的标志也有它的形象。他们还将鼠标变成了放大镜，可以扫过图片（金戒指）。

I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).

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

采纳答案by Anurag

Looking at their source code, it seems they are using rather basic techniques to achieve this.

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

Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.

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

The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.

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

Here's a sorta minimal reconstructed example.

这是一个最小的重构示例。

Another examplewhere we don't hide the div overflow to reveal the entire thing as a square.

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

回答by Herman Schaaf

Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:

嗯，首先，对于任何想要使用这种效果的人来说，有大量的 jQuery 插件。这里仅仅是少数：

1. Power Zoomer
2. Featured Image Zoomer
3. Cloud Zoom

1. 电动变焦
2. 特色图像缩放器
3. 云变焦

Secondly, it's quite easy to achieve. Just load the full-size image, but give it a widthsmaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-positionproperty to the corresponding scaled x,ycoordinate that the user's mouse is currently on.

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

There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.

我想还有其他方法可以做到这一点，谷歌可能会以不同的方式去做，但这是我想到的最明显的方法。

回答by Jan-Mark

Visit http://codeblab.com/glass/for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass. However, simulate-a-circle-with-overlapping-rectanglesworks on (many) more platforms.

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

(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)

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

回答by Andy

There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.

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

Here is how to works:

这是如何工作的：

1. Duplicate the content you want to zoom
2. Place the duplicated content into another element and set the visible width/height and overflow hidden
3. Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.

1. 复制要缩放的内容
2. 将重复的内容放入另一个元素并设置可见的宽度/高度和溢出隐藏
3. 使用 JavaScript 移动复制的内容，使其移动缩放量 * 鼠标移动。还可以通过鼠标移动移动可见的 div。

That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.

那也差不多吧。不过要让它在所有浏览器上都能正常工作，还有很多小事情需要注意。

回答by Lie Ryan

I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).

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

EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/

编辑：如果你使用 CSS border-radius，我已经把它拼凑起来展示你需要的基本技术：http: //jsfiddle.net/yjBuS/

回答by Ethan

Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.

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