今天google 首頁的javascript 動畫實現。好吧，我來晚了。。。

很多人都對今天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);
    })();
})();