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

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




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





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

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

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

CSS部分：

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

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

(function() {  
            try {  
                //二维数组定义155张图片的信息，分别是[图片的left, top, width, height, 1（标记，部分数组有）]  
                //数组中最后一个值“1”是一个标记，表示图片换行  
                var arrImg = [[307, 48, 88, 89], [307, 48, 89, 89], [307, 48, 91, 89]...(省略N个数组)],  
                imgLen = arrImg.length, //图片数组长度  
                imgIndex, imgLeft, imgTop, maxHeight,   //分别代表 当前图片序号，background-position中的left, top，一行图片中的最大高度  
                fun = -1,   //后面setTimeout的返回值，做标记，后面用到  
                funImgClick = function() {  //点击图片的事件（跳转到GOOGLE搜索页面）  
                    google.nav && google.nav.go ?  
                    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") :  
                    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" 
                },  
                funMakeAnimate = function() {   //创建并执行动画的方法，每83毫秒调用一次，创建一个DIV并设置属性、背景图  
                    //取出当前图片信息  
                    var img = arrImg[imgIndex],  
                    //所有DIV都添加到这个容器  
                    wrap = document.getElementById("hplogo");  
                    if (wrap && img[0]) {  
                        //开始创建DIV  
                        var div = document.createElement("div");  
                        div.id = "hplogo" + imgIndex;  
                        div.style.left = img[0] + "px";  
                        div.style.top = img[1] + "px";  
                        div.style.width = img[2] + "px";  
                        div.style.height = img[3] + "px";  
                        div.style.background = "url(images/graham11-hp-sprite.png) no-repeat " + -imgLeft + "px " + -imgTop + "px";  
                        div.  
                        //这里使用了利用&&运算符的技巧，下面还会用到这个技巧  
                        //相当于"if (img[3] > maxHeight) { maxHeight = img[3]; }"  
                        img[3] > maxHeight && (maxHeight = img[3]); //保证maxHeight取当前行最大的图片高度  
                        //如果有5个值，则说明换行了，left重新从0开始，并累加top，行最大高度清0  
                        //否则left累加当前图片的宽度  
                        img[4] ? (imgLeft = 0, imgTop += maxHeight, maxHeight = 0) : imgLeft += img[2];  
                        wrap.appendChild(div);  
                        ++imgIndex;  
                        //继续动画  
                        imgIndex < imgLen && (fun = window.setTimeout(funMakeAnimate, 83)); //又是 && ，同上  
                    }  
                },  
                funInit = function() {  //页面加载的时候就执行该函数，初始化变量并调用动画函数  
                    maxHeight = imgTop = imgLeft = imgIndex = 0;  
                    //如果动画已经在播放，则先停止并删掉相应的DIV节点  
                    //再次出现 && 的使用  
                    fun != -1 && (window.clearTimeout(fun), fun = -1);  
                    //删除已经添加的DOM节点  
                    for (var index = 0; index < imgLen; ++index) {  
                        var div = document.getElementById("hplogo" + index);  
                        div && div.parentNode && div.parentNode.removeChild(div);  
                    }  
                    //第一次调用动画函数  
                    fun = window.setTimeout(funMakeAnimate, 83);  
                };  
 
                var originImg = document.createElement("img");  
                //页面  
                originImg.addEventListener ?  
                    originImg.addEventListener("load", funInit, false) : //addEventListener用于Mozilla系列浏览器，第三个参数userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式  
                    originImg.attachEvent("onload", funInit);   //用于IE浏览器  
                originImg.src = "images/graham11-hp-sprite.png";  
            }  
            catch (o) {  
                //GOOGLE的错误处理  
                //google.ml(o, !1, { cause: "DOODLE" });  
            }  
        })()

源码下载：点我下载