今天的谷歌涂鸦世界博览会是如何实施的？

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。这本身并不仅限于HTML5规范，因此否。
• jQuery：否。

Answer 2

我检查了它，就像这样的“镜头变焦”效果一样简单：http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html带有一个大图像和动画上面的一些GIF动画：）

Answer 3

不，据我所知，它没有使用HTML5或jQuery中的任何新功能（除非你计算它在显示放大镜时使用的缩放转换）。我非常怀疑谷歌会在头版上放一些像jQuery一样大的东西......

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

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

然后由放大镜图像覆盖，其厚边框使我们看到涂鸦图像的圆形部分。