20

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

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

4

6 回答 6

16

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

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

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

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

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

于 2011-05-01T21:25:04.400 回答
11

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

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

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

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

于 2011-05-01T15:54:33.870 回答
6

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

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

于 2012-10-17T14:03:15.080 回答
5

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

这是如何工作的：

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

这也差不多。尽管要使其在所有浏览器上都能正常工作，但仍有许多小事情需要注意。

于 2011-08-05T18:01:49.530 回答
4

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

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

于 2011-05-01T15:58:32.987 回答
0

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

于 2011-05-01T16:03:52.183 回答