今天(Jules Verne)谷歌的涂鸦如何运作？

Question

我相信你们中的许多人已经检查了今天的(2011-02-08)Google的涂鸦(如果涂鸦更改,链接到CNN上的文章).它太棒了,我试着搞清楚它在Firebug中的实现,我发现的一些事情是它有大约3层图像(用于3D效果),它们是平移和旋转(-moz-transform:rotate())等等.我没有发现什么(和我的问题):

• 当你握住手柄时它如何隐藏我们的鼠标光标,我知道它cursor:none在CSS中,但我仍然看到这个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;
  }
  

• 它如何允许拖动手柄,并根据位置同时在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张图片(它们很长,这里显示不可行)

大鱼,鲨鱼
巨型尾巴
在水动物群
天空下

---

更新

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

以下是您查看的链接:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ < - 最新版本

Answer 1

这是我可以做的最好的所有代码可读:

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

Answer 2

光标的CSS更高:

#hplogo.drag-active #verne-drag, #hplogo.drag-active #verne-drag * {
  cursor:move !important;
  cursor:none !important;
}

虽然没有多少浏览器支持none,但多个!importants不起作用 - 在Chrome和IE中我在拖动时看到默认指针.cursor: none适用于Firefox 3.