javascript - 今天(儒勒凡尔纳)谷歌的涂鸦是如何工作的？

Question

我相信你们中的许多人已经查看了今天的 (2011-02-08) Google's doodle (link to article on CNN if doodle changes)。这太棒了，我试着弄清楚它在 Firebug 中的实现，我发现的一些事情是它有大约 3 层图像(用于 3D 效果)，它们是平移和旋转的(- moz-transform:rotate()), 等等。我没有发现的是(和我的问题):

• 当您按住 handle 时它如何隐藏我们的鼠标光标，我知道它在 CSS 中是 cursor:none 但我仍然看到 handle 的这个 CSS:

  #verne-drag {
      background: url("logos/2011/verne-hp.png") no-repeat scroll 1000px 1000px transparent;
      cursor: pointer;/*here its pointer not none*/
      height: 150px;
      left: 565px;
      position: absolute;
      top: 15px;
      width: 150px;
      z-index: 700;
  }
  

• 它如何允许拖动句柄 so 并同时根据位置在 9 个图像之间切换。

• 阐明它的 Javascript(我没有在 firebug 中找到一个......只有那个通常的搜索脚本，以及这个只计算 mod 的小代码(其他任务可能的代码怎么样)

  google.doodle.mod = function (a, n) {return a % n;};
  2 /* !eval(new String("google.doodle.mod = function(a,n);)) */
  

所以简单地指出它是如何实现的(我提到了 3 个，但包括其他可能不那么明显的要点)。

---

引用图片资源:

其他 3 张图片的链接(它们太长了，无法在此处显示)

Big Fishes, shark
Giant Tail
Under water fauna
Sky

---

更新

Myles Gray这里通过重新实现(并使其更具可读性)Javascript 代码、CSS 和 HTML 做出了巨大贡献，向我们展示了 Doodle 是如何实现的。

这里是供大家查看的链接:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ <-- 最新修订

Answer 1

这是我能做的最好的事情，让他们所有的代码都可读:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/