学步园

很多人都对今天google 首页的动态logo 感兴趣，我也照着实现了一下，但是刚刚发现园子里已经有人捷足先登了（请看这里）。。。

毕竟是自己的劳动成果，我想就还是发了吧，其实 胡尐睿丶 同学的实现还是有点投机取巧的，他把动画执行完成后生成的html 全部复制下来了，先全部隐藏然后再逐个显现。。。

我的方法则是和google 一样，不断的插入带有背景的div 来实现的，先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组，然后用setTimeout 定时地插入带有这些样式的div 即可。

效果如下：（点击运行！）

动画中用到的背景图片：

代码则比较简单：

(function() {
var style_info = [
        [307,48,88,89,0,0],
        [307,48,89,89,-88,0],
//此处省略n行...
    ];
var logo = document.getElementById('hplogo');
    (function logo_run() {
        setTimeout( function() {
var a, div;
if (a = style_info.shift()) {
                div = document.createElement('div');
                div.style.cssText = 'position:absolute;'+
'left:'+a[0]+'px;top:'+a[1]+'px;width:'+a[2]+'px;height:'+a[3]+'px;'+
'background:url("graham11-hp-sprite.png") no-repeat '+a[4]+'px '+a[5]+'px;';
                logo.appendChild(div);
                logo_run();
            }
        }, 83);
    })();
})();