Google首页现代舞先驱玛莎·葛兰姆JS代码分析（附源码下载）

  2011年5月11日，GOOGLE为了纪念现代舞先驱玛莎·葛兰姆 117 周年诞辰，用巧妙的技术和奇特的创意在首页创建了一副跳舞的图，我把整个源码下载下来并加以分析和重构，效果图如下：

整个动画实际上是由155张小图片做出来的（GOOGLE的设计师太NB了），就像放电影那样，如下图：

虽然原理很简单，就是用JS来控制播放上面的图片，不过里面还有很多技巧是值得学习的，下面是我对代码的分析。

HTML部分很简单，就一个div容器：

1. <div id="hplogo"> 
2.     <a href="#"> 
3.         <img title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" border="0" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="images/graham11-hp-start.png" /> 
4.     </a> 
5. </div> 

CSS部分：

1. #hplogo { position: relative; cursor: pointer; width: 403px; height: 156px; margin: 120px auto 0 auto; background: #fff none repeat 0% 0% scroll; }  
2. #hplogo div { position: absolute; } 

JS部分（完整代码在附件中）：

1. (function() {  
2.             try {  
3.                 //二维数组定义155张图片的信息，分别是[图片的left, top, width, height, 1（标记，部分数组有）]  
4.                 //数组中最后一个值“1”是一个标记，表示图片换行  
5.                 var arrImg = [[307, 48, 88, 89], [307, 48, 89, 89], [307, 48, 91, 89]...(省略N个数组)],  
6.                 imgLen = arrImg.length, //图片数组长度  
7.                 imgIndex, imgLeft, imgTop, maxHeight,   //分别代表 当前图片序号，background-position中的left, top，一行图片中的最大高度  
8.                 fun = -1,   //后面setTimeout的返回值，做标记，后面用到  
9.                 funImgClick = function() {  //点击图片的事件（跳转到GOOGLE搜索页面）  
10.                     google.nav && google.nav.go ?  
11.                     google.nav.go("/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN") :  
12.                     window.location.href = "/search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN" 
13.                 },  
14.                 funMakeAnimate = function() {   //创建并执行动画的方法，每83毫秒调用一次，创建一个DIV并设置属性、背景图  
15.                     //取出当前图片信息  
16.                     var img = arrImg[imgIndex],  
17.                     //所有DIV都添加到这个容器  
18.                     wrap = document.getElementById("hplogo");  
19.                     if (wrap && img[0]) {  
20.                         //开始创建DIV  
21.                         var div = document.createElement("div");  
22.                         div.id = "hplogo" + imgIndex;  
23.                         div.style.left = img[0] + "px";  
24.                         div.style.top = img[1] + "px";  
25.                         div.style.width = img[2] + "px";  
26.                         div.style.height = img[3] + "px";  
27.                         div.style.background = "url(images/graham11-hp-sprite.png) no-repeat " + -imgLeft + "px " + -imgTop + "px";  
28.                         div.  
29.                         //这里使用了利用&&运算符的技巧，下面还会用到这个技巧  
30.                         //相当于"if (img[3] > maxHeight) { maxHeight = img[3]; }"  
31.                         img[3] > maxHeight && (maxHeight = img[3]); //保证maxHeight取当前行最大的图片高度  
32.                         //如果有5个值，则说明换行了，left重新从0开始，并累加top，行最大高度清0  
33.                         //否则left累加当前图片的宽度  
34.                         img[4] ? (imgLeft = 0, imgTop += maxHeight, maxHeight = 0) : imgLeft += img[2];  
35.                         wrap.appendChild(div);  
36.                         ++imgIndex;  
37.                         //继续动画  
38.                         imgIndex < imgLen && (fun = window.setTimeout(funMakeAnimate, 83)); //又是 && ，同上  
39.                     }  
40.                 },  
41.                 funInit = function() {  //页面加载的时候就执行该函数，初始化变量并调用动画函数  
42.                     maxHeight = imgTop = imgLeft = imgIndex = 0;  
43.                     //如果动画已经在播放，则先停止并删掉相应的DIV节点  
44.                     //再次出现 && 的使用  
45.                     fun != -1 && (window.clearTimeout(fun), fun = -1);  
46.                     //删除已经添加的DOM节点  
47.                     for (var index = 0; index < imgLen; ++index) {  
48.                         var div = document.getElementById("hplogo" + index);  
49.                         div && div.parentNode && div.parentNode.removeChild(div);  
50.                     }  
51.                     //第一次调用动画函数  
52.                     fun = window.setTimeout(funMakeAnimate, 83);  
53.                 };  
54.  
55.                 var originImg = document.createElement("img");  
56.                 //页面  
57.                 originImg.addEventListener ?  
58.                     originImg.addEventListener("load", funInit, false) : //addEventListener用于Mozilla系列浏览器，第三个参数userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式  
59.                     originImg.attachEvent("onload", funInit);   //用于IE浏览器  
60.                 originImg.src = "images/graham11-hp-sprite.png";  
61.             }  
62.             catch (o) {  
63.                 //GOOGLE的错误处理  
64.                 //google.ml(o, !1, { cause: "DOODLE" });  
65.             }  
66.         })() 

源码下载：点我下载