精简版纪念现代舞先驱玛莎·葛兰姆的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:园子的后台编辑平台的确不好用，我都改了好几次了，浪费了不少时间········