模仿google首页图片动画效果 (css+javascript)-mac谷歌浏览器300多mb-程序博客网

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:

<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-height:1.4em" cellpadding="3" cellspacing="2" border="0">
<tr height="50">
<td><DIV id="ToolTip1" style=" width:70px; height:2px;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; height:2px;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; height:2px;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; height:2px;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; height:2px;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>

1:
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;
}

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);
//}

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;
   height: 59px;
   cursor: pointer;
   cursor:hand;
}
#google_menu {
   position:absolute;
   width:400px;
   height:170px;
}