模仿google首页图片动画效果 (css+javascript)...
时间：2010-08-08 来源：mubingyun
模仿google首页图片动画效果 (css+javascript)
就是这种效果 帮朋友写的记在这里先
test.html
Code (xml):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url]
<head>
<title>google首页效果</title>
<link href="page.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="timer.js"></script>
</head>
<body>
<div id="google_menu">
<table style="margin:2em auto;border-collapse:collapse;line-cellpadding="3" cellspacing="2" border="0">
<tr height="50">
<td><DIV id="ToolTip1" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative; TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="BORDER-RIGHT: #3b79e7 1px solid; BORDER-BOTTOM-COLOR: #3b79e7; BORDER-LEFT: #3b79e7 1px solid; BORDER-TOP-COLOR: #3b79e7; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>空间</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -37px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A>
</DIV></td>
<td><DIV id="ToolTip2" style="width:70px; Z-INDEX:2;DISPLAY: none; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="BORDER-RIGHT: #96cfec 1px solid; BORDER-BOTTOM-COLOR: #96cfec; BORDER-LEFT: #96cfec 1px solid; BORDER-TOP-COLOR: #96cfec; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>百货公司</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -74px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip3" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="BORDER-RIGHT: #e8d40f 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #e8d40f 1px solid; BORDER-TOP-COLOR: #e8d40f; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>特卖会</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -111px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip4" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="BORDER-RIGHT: #ea504c 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #ea504c 1px solid; BORDER-TOP-COLOR: #ea504c; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>精选网店</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -148px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip5" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="BORDER-RIGHT: #54a70d 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #54a70d 1px solid; BORDER-TOP-COLOR: #54a70d; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>特色小店</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -185px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
</tr>
<tr>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni1" style="float:left;" class="animator_containter" onMouseOver="go1();return false;" onMouseOut="back1();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni2" style="float:left;" class="animator_containter" onMouseOver="go2();return false;" onMouseOut="back2();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni3" style="float:left;" class="animator_containter" onMouseOver="go3();return false;" onMouseOut="back3();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni4" style="float:left;" class="animator_containter" onMouseOver="go4();return false;" onMouseOut="back4();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni5" style="float:left;" class="animator_containter" onMouseOver="go5();return false;" onMouseOut="back5();return false;"> </div>
</a></td>
</tr>
</table>
<script src="page.js" type="text/javascript"></script>
</div>
</body>
</html>
<head>
<title>google首页效果</title>
<link href="page.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="timer.js"></script>
</head>
<body>
<div id="google_menu">
<table style="margin:2em auto;border-collapse:collapse;line-cellpadding="3" cellspacing="2" border="0">
<tr height="50">
<td><DIV id="ToolTip1" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative; TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="BORDER-RIGHT: #3b79e7 1px solid; BORDER-BOTTOM-COLOR: #3b79e7; BORDER-LEFT: #3b79e7 1px solid; BORDER-TOP-COLOR: #3b79e7; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>空间</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -37px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A>
</DIV></td>
<td><DIV id="ToolTip2" style="width:70px; Z-INDEX:2;DISPLAY: none; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="BORDER-RIGHT: #96cfec 1px solid; BORDER-BOTTOM-COLOR: #96cfec; BORDER-LEFT: #96cfec 1px solid; BORDER-TOP-COLOR: #96cfec; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>百货公司</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -74px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip3" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="BORDER-RIGHT: #e8d40f 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #e8d40f 1px solid; BORDER-TOP-COLOR: #e8d40f; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>特卖会</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -111px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip4" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="BORDER-RIGHT: #ea504c 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #ea504c 1px solid; BORDER-TOP-COLOR: #ea504c; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>精选网店</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -148px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
<td><DIV id="ToolTip5" style=" width:70px; DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION:relative TOP: 0px"> <A style="COLOR: #444; TEXT-DECORATION: none" href="#" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="BORDER-RIGHT: #54a70d 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #54a70d 1px solid; BORDER-TOP-COLOR: #54a70d; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap"> <FONT size=-1><SPAN>特色小店</SPAN></FONT> </DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -185px url([url]http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); [/url]MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
</DIV>
</A> </DIV></td>
</tr>
<tr>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni1" style="float:left;" class="animator_containter" onMouseOver="go1();return false;" onMouseOut="back1();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni2" style="float:left;" class="animator_containter" onMouseOver="go2();return false;" onMouseOut="back2();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni3" style="float:left;" class="animator_containter" onMouseOver="go3();return false;" onMouseOut="back3();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni4" style="float:left;" class="animator_containter" onMouseOver="go4();return false;" onMouseOut="back4();return false;"> </div>
</a></td>
<td><a style="width:20%;color:#444;text-decoration:none;vertical-align:bottom" href="#" target=_blank>
<div id="divAni5" style="float:left;" class="animator_containter" onMouseOver="go5();return false;" onMouseOut="back5();return false;"> </div>
</a></td>
</tr>
</table>
<script src="page.js" type="text/javascript"></script>
</div>
</body>
</html>
common.js
Code (js):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
if (typeof(geekeesjs) == "undefined")
_geekees = geekeesjs = {};
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
_geekees = geekeesjs = {};
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
timer.js
Code (js):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
//Updated 4/18/2003: Footprint decreased, minor code improvements.
//Updated 5/3/2003: Minor comment clarification; no code changes.
//Updated 5/10/2003: Minor code improvements.
// The constructor should be called with
// the parent object (optional, defaults to window).
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}
//Here's an example of the code in action:
//function Ticker(){
//this.count = 0;
//this.timer = new Timer(this);
//}
//Ticker.prototype.tick = function(d){
//this.count+=d;
//window.status = ""+this.count;
//this.timer.setTimeout("tick", 1000, d);
//}
//window.onload = function(){
//var ticker = new Ticker();
//ticker.tick(1);
//}
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
//Updated 4/18/2003: Footprint decreased, minor code improvements.
//Updated 5/3/2003: Minor comment clarification; no code changes.
//Updated 5/10/2003: Minor code improvements.
// The constructor should be called with
// the parent object (optional, defaults to window).
function Timer(){
this.obj = (arguments.length)?arguments[0]:window;
return this;
}
// The set functions should be called with:
// - The name of the object method (as a string) (required)
// - The millisecond delay (required)
// - Any number of extra arguments, which will all be
// passed to the method when it is evaluated.
Timer.prototype.setInterval = function(func, msec){
var i = Timer.getNew();
var t = Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setInterval(t,msec);
return i;
}
Timer.prototype.setTimeout = function(func, msec){
var i = Timer.getNew();
Timer.buildCall(this.obj, i, arguments);
Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
return i;
}
// The clear functions should be called with
// the return value from the equivalent set function.
Timer.prototype.clearInterval = function(i){
if(!Timer.set[i]) return;
window.clearInterval(Timer.set[i].timer);
Timer.set[i] = null;
}
Timer.prototype.clearTimeout = function(i){
if(!Timer.set[i]) return;
window.clearTimeout(Timer.set[i].timer);
Timer.set[i] = null;
}
// Private data
Timer.set = new Array();
Timer.buildCall = function(obj, i, args){
var t = "";
Timer.set[i] = new Array();
if(obj != window){
Timer.set[i].obj = obj;
t = "Timer.set["+i+"].obj.";
}
t += args[0]+"(";
if(args.length > 2){
Timer.set[i][0] = args[2];
t += "Timer.set["+i+"][0]";
for(var j=1; (j+2)<args.length; j++){
Timer.set[i][j] = args[j+2];
t += ", Timer.set["+i+"]["+j+"]";
}
}
t += ");";
Timer.set[i].call = t;
return t;
}
Timer.callOnce = function(i){
if(!Timer.set[i]) return;
eval(Timer.set[i].call);
Timer.set[i] = null;
}
Timer.getNew = function(){
var i = 0;
while(Timer.set[i]) i++;
return i;
}
//Here's an example of the code in action:
//function Ticker(){
//this.count = 0;
//this.timer = new Timer(this);
//}
//Ticker.prototype.tick = function(d){
//this.count+=d;
//window.status = ""+this.count;
//this.timer.setTimeout("tick", 1000, d);
//}
//window.onload = function(){
//var ticker = new Ticker();
//ticker.tick(1);
//}
page.js
Code (js):
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
//***************************Class _geekees.Animator********************************
//initialize
if (typeof(_geekees.Animator) == "undefined")
_geekees.Animator = {};
else
alert("Animator is already set!");
//constructor
_geekees.Animator = function( containerId
, width
, height
, initialPosX
, initialPosY
, motionTime
, stepX
, stepY ){
this.container = $( containerId );
this.container.style.width = width + "px";
this.container.style.height = height + "px";
this.container.style.backgroundPosition = initialPosX + "px " + initialPosY + "px";
this.startPosX = 0;
this.startPosY = 0;
this.endPosX = 0;
this.endPosY = 0;
this.isForwardX = true;
this.isForwardY = true;
this.motionTime = motionTime;
this.timer = new Timer( this );//initial the Timer class
this.stepX = stepX;//each time moving step
this.stepY = stepY;
}
//move method
_geekees.Animator.prototype.move = function(){
if (this.isForwardX) {
if (this.startPosX < this.endPosX) {
this.timer.setTimeout('move', this.motionTime);
this.startPosX += this.stepX;
}
}
else {
if (this.startPosX > this.endPosX) {
this.timer.setTimeout('move', this.motionTime);
this.startPosX -= this.stepX;
}
}
if (this.isForwardY) {
if (this.startPosY < this.endPosY) {
this.timer.setTimeout('move', this.motionTime);
this.startPosY += this.stepY;
}
}
else {
if (this.startPosY > this.endPosY) {
this.timer.setTimeout('move', this.motionTime);
this.startPosY -= this.stepY;
}
}
//set the container status
this.container.style.backgroundPosition = this.startPosX + "px " + this.startPosY + "px";
}
//the method which to be called
_geekees.Animator.prototype.animate = function( startX, endX, startY, endY ){
this.startPosX = startX;
this.endPosX = endX;
this.startPosY = startY;
this.endPosY = endY;
this.isForwardX = startX <= endX;//determine whether start position is larger than end position
this.isForwardY = startY <= endY;
this.move();
}
//***************************End of Class _geekees.Animator********************************
/******************test*******************/
function go1(){
ani1.animate( 0, -284, 0, 0 );
$("ToolTip1").style.display='block';
}
function back1(){
ani1.animate( -284, 0, 0, 0 );
$("ToolTip1").style.display='none';
}
function go2(){
ani2.animate( 0, -284, -59, -59 );
$("ToolTip2").style.display='block';
}
function back2(){
ani2.animate( -284, 0, -59, -59 );
$("ToolTip2").style.display='none';
}
function go3(){
ani3.animate( 0, -284, -118, -118 );
$("ToolTip3").style.display='block';
}
function back3(){
ani3.animate( -284, 0, -118, -118 );
$("ToolTip3").style.display='none';
}
function go4(){
ani4.animate( 0, -284, -177, -177 );
$("ToolTip4").style.display='block';
}
function back4(){
ani4.animate( -284, 0, -177, -177 );
$("ToolTip4").style.display='none';
}
function go5(){
ani5.animate( 0, -284, -236 , -236 );
$("ToolTip5").style.display='block';
}
function back5(){
ani5.animate( -284, 0, -236, -236 );
$("ToolTip5").style.display='none';
}
var ani1 = new _geekees.Animator( 'divAni1', 71,59, 0, 0, 100 ,71, 0);
var ani2 = new _geekees.Animator( 'divAni2', 71,59, 0, -59, 100 ,71, 0);
var ani3 = new _geekees.Animator( 'divAni3', 71,59, 0, -118, 100 ,71, 0);
var ani4 = new _geekees.Animator( 'divAni4', 71,59, 0, -177, 100 ,71, 0);
var ani5 = new _geekees.Animator( 'divAni5', 71,59, 0, -236, 100 ,71, 0);
.animator_containter{
margin: 0.5em auto;
background: transparent url(menu.png) no-repeat scroll 0px 0px ;
width: 71px;
59px;
cursor: pointer;
cursor:hand;
}
#google_menu {
position:absolute;
width:400px;
height:170px;
}
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
//***************************Class _geekees.Animator********************************
//initialize
if (typeof(_geekees.Animator) == "undefined")
_geekees.Animator = {};
else
alert("Animator is already set!");
//constructor
_geekees.Animator = function( containerId
, width
, height
, initialPosX
, initialPosY
, motionTime
, stepX
, stepY ){
this.container = $( containerId );
this.container.style.width = width + "px";
this.container.style.height = height + "px";
this.container.style.backgroundPosition = initialPosX + "px " + initialPosY + "px";
this.startPosX = 0;
this.startPosY = 0;
this.endPosX = 0;
this.endPosY = 0;
this.isForwardX = true;
this.isForwardY = true;
this.motionTime = motionTime;
this.timer = new Timer( this );//initial the Timer class
this.stepX = stepX;//each time moving step
this.stepY = stepY;
}
//move method
_geekees.Animator.prototype.move = function(){
if (this.isForwardX) {
if (this.startPosX < this.endPosX) {
this.timer.setTimeout('move', this.motionTime);
this.startPosX += this.stepX;
}
}
else {
if (this.startPosX > this.endPosX) {
this.timer.setTimeout('move', this.motionTime);
this.startPosX -= this.stepX;
}
}
if (this.isForwardY) {
if (this.startPosY < this.endPosY) {
this.timer.setTimeout('move', this.motionTime);
this.startPosY += this.stepY;
}
}
else {
if (this.startPosY > this.endPosY) {
this.timer.setTimeout('move', this.motionTime);
this.startPosY -= this.stepY;
}
}
//set the container status
this.container.style.backgroundPosition = this.startPosX + "px " + this.startPosY + "px";
}
//the method which to be called
_geekees.Animator.prototype.animate = function( startX, endX, startY, endY ){
this.startPosX = startX;
this.endPosX = endX;
this.startPosY = startY;
this.endPosY = endY;
this.isForwardX = startX <= endX;//determine whether start position is larger than end position
this.isForwardY = startY <= endY;
this.move();
}
//***************************End of Class _geekees.Animator********************************
/******************test*******************/
function go1(){
ani1.animate( 0, -284, 0, 0 );
$("ToolTip1").style.display='block';
}
function back1(){
ani1.animate( -284, 0, 0, 0 );
$("ToolTip1").style.display='none';
}
function go2(){
ani2.animate( 0, -284, -59, -59 );
$("ToolTip2").style.display='block';
}
function back2(){
ani2.animate( -284, 0, -59, -59 );
$("ToolTip2").style.display='none';
}
function go3(){
ani3.animate( 0, -284, -118, -118 );
$("ToolTip3").style.display='block';
}
function back3(){
ani3.animate( -284, 0, -118, -118 );
$("ToolTip3").style.display='none';
}
function go4(){
ani4.animate( 0, -284, -177, -177 );
$("ToolTip4").style.display='block';
}
function back4(){
ani4.animate( -284, 0, -177, -177 );
$("ToolTip4").style.display='none';
}
function go5(){
ani5.animate( 0, -284, -236 , -236 );
$("ToolTip5").style.display='block';
}
function back5(){
ani5.animate( -284, 0, -236, -236 );
$("ToolTip5").style.display='none';
}
var ani1 = new _geekees.Animator( 'divAni1', 71,59, 0, 0, 100 ,71, 0);
var ani2 = new _geekees.Animator( 'divAni2', 71,59, 0, -59, 100 ,71, 0);
var ani3 = new _geekees.Animator( 'divAni3', 71,59, 0, -118, 100 ,71, 0);
var ani4 = new _geekees.Animator( 'divAni4', 71,59, 0, -177, 100 ,71, 0);
var ani5 = new _geekees.Animator( 'divAni5', 71,59, 0, -236, 100 ,71, 0);
page.css
Code:
.animator_containter{
margin: 0.5em auto;
background: transparent url(menu.png) no-repeat scroll 0px 0px ;
width: 71px;
59px;
cursor: pointer;
cursor:hand;
}
#google_menu {
position:absolute;
width:400px;
height:170px;
}
效果
-------------------------------------------------------------------------------------------------------------
相关阅读 更多 +
