javascript - 今天的google doogle World's Fair是如何实现的？

Question

我想知道它是否使用了 HTML5 和 jquery 的强大功能，我可以获得任何示例示例吗？

Answer 1

检查代码时，您实际上会看到涂鸦由多个图像组成：

• http://www.google.com/logos/2011/worldsfair11-hp-1.gif
• http://www.google.com/logos/2011/worldsfair11-hp-2.gif
• http://www.google.com/logos/2011/worldsfair11-hp-3.gif
• http://www.google.com/logos/2011/worldsfair11-hp-4.gif
• http://www.google.com/logos/2011/worldsfair11-hr.jpg - 实际的静态 Doogle
• http://www.google.com/logos/2011/worldsfair11-hp.png

美化的JavaScript在这里： http: //pastebin.com/r8s9H2jA

它似乎使用 JavaScript 来创建放大镜，并使用 CSS / JavaScript 的组合将动画元素定位在正确的位置。

简而言之：

• HTML5：它是结合了 CSS 的 JavaScript。这本身并不局限于 HTML5 规范，所以没有.
• jQuery：没有。

Answer 2

我检查了它，它就像这样的“镜头缩放”效果一样简单：http : //www.dailycoding.com/Uploads/2011/03/imageLens/demo.html 上面有一张大图像和一些动画 gif对于动画:)

Answer 3

不，据我所知，它没有使用 HTML5 或 jQuery 中的任何新功能（除非您计算它在显示放大镜时使用的比例转换）。我严重怀疑谷歌会在他们的首页上放像 jQuery 这样大的东西......

它通过基本上具有三个涂鸦副本来实现圆形“图像蒙版”效果，并从中构建一个看起来像这样的圆角矩形（ASCII art go）

__|¯¯¯¯|__
|        |
|        |
|__    __|
  |____|

然后它被放大图像覆盖，它的粗边框让我们看起来像是看到了涂鸦图像的圆形部分。