精简版纪念现代舞先驱玛莎·葛兰姆的googlelogo涂鸦
今天一早看到园子首页：模拟谷歌今日使用的css动画(46/7689,27) 以及里面《喜欢今天的Google LOGO 玛莎·葛兰姆》对google实现这种特效
于是就忍不住研究了一番，主要是详细查看了喜欢今天的Google LOGO 玛莎·葛兰姆上拷贝下来的代码；发现js代码有点繁琐，
于是拷下来本地调试了一番，去掉无用的代码，顺便把代码注释一下，比较容易阅读。
废话少说，看如下代码（html部分）：
<div id=hplogo>
<a href="javascipt:void(0)" target="_blank">
<img
src="http://www.google.com.hk/logos/2011/graham11-hp-start.png"
border=0 alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" style="z-index:55"/>
</a>
</div>
javacript代码部分：
调用到的数组部分（为了不影响阅读，特地把数组部分独立放）：
View Code
[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]]
(function () {//js闭包实现
var moveArr =[拷贝上边的数组],
arrLength = moveArr.length,
f, g, h, i, j = -1,
k = function () {
window.location.href = "#";
},
createDiv = function () {
var a = moveArr[f],
c = document.getElementById("hplogo");
if (c && a[0]) {
var b = document.createElement("div");
b.id = "hplogo" + f;
b.style.left = a[0] + "px";
b.style.top = a[1] + "px";
b.style.width = a[2] + "px";
b.style.height = a[3] + "px";
b.style.background = "url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat " + -g + "px " + -h + "px";
b.onmousedown = k;
a[3] > i && (i = a[3]);
a[4] ? (g = 0, h += i, i = 0) : g += a[2];//当遇到[3, 4, 150, 136, 1]时运行(g = 0, h += i, i = 0)
c.appendChild(b);
++f;
f < arrLength && (j = window.setTimeout(createDiv, 83))//等效于if(f<arrLength) j = window.setTimeout(l, 83);
}
},
startMove = function () {
i = h = g = f = 0;
j != -1 && (window.clearTimeout(j), j = -1);//刷新页面时，因为是闭包函数，所以j=上次的window.setTimeout(l, 83)浏览器重新初始化j=-1
for (var a = 0; a < arrLength; ++a) {//初始化hplogo清空，经测试，不需要，因为每次刷新页面，动态添加的div自动清空
var hplogo_create = document.getElementById("hplogo" + a);
hplogo_create && hplogo_create.parentNode && hplogo_create.parentNode.removeChild(hplogo_create)
}
j = window.setTimeout(createDiv, 83)
};
/* var n = document.createElement("img");
n.addEventListener ? n.addEventListener("load", m, !1) : n.attachEvent("onload", m);//解决浏览器兼容：attachEvent不支持Mozilla系列
n.src = "http://www.google.com.hk/logos/2011/graham11-hp-sprite.png"*/
window.onload = function(){//完全可以换成这样运行
startMove();
}
})();
实际效果如下：
写完之后，感觉有点像炒冷饭；不过就这么办吧；欢迎前来拍砖
ps:园子的后台编辑平台的确不好用，我都改了好几次了，浪费了不少时间········
