模仿google首页图片动画效果 (css+javascript)

最新推荐文章于 2024-10-07 09:24:46 发布
最新推荐文章于 2024-10-07 09:24:46 发布
阅读量1.6k 收藏
点赞数
分类专栏： ASP.NET 文章标签： javascript google css float animation function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mubingyun/article/details/5798220
版权

 

模仿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:
<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 >

 

common.js
Code (js):

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

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

 

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

 

 

page.css


Code:

 
.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;
}

 

效果

-------------------------------------------------------------------------------------------------------------

       

 

 

 

 

 





木冰云
关注
专栏目录
仿照google主页面布局html代码,超酷仿GOOGLE首页导航菜单效果
weixin_32306885的博客
06-04 1225
超酷仿GOOGLE首页导航菜单效果window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,18065",kHL:"zh-CN"};function sf(){document.f.q.focus()}window.clk=function(b,c,d,e,f,g){if(document.images){var a=encode...
仿谷歌主页js动画效果实现代码
11-30
这个效果可能是模仿谷歌主页上的一些动态元素，如Logo或搜索框的交互动画。通过这段代码，我们可以学习如何使用JavaScript和CSS来创建类似的动画效果。 描述中提到的代码是一个完整的HTML文件，包含了必要的HTML、...
仿google首页的动画按钮
cpdw840624的专栏
02-03 177
最近闲来无事，自己实现了下google首页的动画按钮，但是效果和google的差很多，大家看看，这个应该怎么实现好？代码在附件中，大家研究下。 [code="html"] label {display:block; float:left; width:50px;height:37px;background-image:url(toolbar.png);} ...
google首页动画效果
ice-cream
12-04 277
原本以为google首页的动画是动画图片，后来发现是用js写的。 好奇，就仿着google首页的动画用jquery试着写了个。 难点就在切图和定位上。   下面讲一下这两个难点。 切图 ： a ：   这里我拉了些参考线，便于看得更清楚些。每个方框里的宽度高度都相同。然后用setTimeout延时，间隔相等的时间去改变背景图片的位置，连贯起来看起来就像是个小flash动画   for(...
模拟google首页动画图标的
jzdzhiyun的专栏
12-15 568
 var te=0;var te2=5;var arrbg=new Array();var doitvar doit1arrbg[0]="0px 0px";arrbg[1]="-51px 0px";arrbg[2]="-103px 0px";arrbg[3]="-155px 0px";arrbg[4]="-207px 0px";arrbg[5]="-207px 3px";functio
模仿google导航效果
showbo的专栏
07-03 1088
示例下载点这里 google.js var Showbo={author:'Showbo',des:'只是自己写的一个效果，和google的差很多，达不到google的那种完美效果，呵呵~~'}; //导航动态 Showbo.xPos=[0,-50,-100,-150,-200,-250,-300];//定义background-position的x位置,如果修改过图片的位置，需要
JavaScript写的模仿Google的鼠标滑过显示应用效果demo
05-20
这个“JavaScript写的模仿Google的鼠标滑过显示应用效果demo”是一个示例项目，它旨在重现Google搜索结果页面上的一个交互特性：当用户鼠标悬停在搜索结果链接上时，会显示出与链接相关的信息预览。 在Google的搜索...
用css3模拟谷歌MaterialDesignRipple水波纹触摸动画插件
08-10
总结一下，通过CSS3的动画和过渡效果，我们可以模拟出谷歌Material Design中的Ripple水波纹触摸动画。结合JavaScript，我们可以实现更精细的交互控制，让网页的触控反馈更加生动和自然。这个知识点对于提升Web应用的...
JavaScript仿google首页动画
05-15
这个项目的主要目标是模仿Google首页的经典Logo动画，比如当你在搜索框输入时，字母会轻微跳跃，增加了用户体验的趣味性。 首先，JavaScript是实现这一效果的核心语言。它是一种轻量级的脚本语言，广泛应用于网页和...
纯css3实现炫酷谷歌loading图标加载动画特效源码.zip
11-09
【标题】中的“纯css3实现炫酷谷歌loading图标加载动画特效源码”是指使用CSS3这门现代网页样式语言，来制作一个模仿谷歌风格的、动态的、具有视觉吸引力的加载图标。这个加载图标通常在网页内容还未完全加载时显示...
google导航条源码
04-24
现在google的导航条很cool吧，点一个本子，地图的什么的会想动画一样跳出来，很炫吧，想加入到自己的网站来吗，就几个js文件，组织下就可以加到你的网站里了，别犹豫了快下吧！！！
Asp.net mvc 3中模仿Google首页导航条的布局和样式
weixin_30279671的博客
04-13 146
一、Google首页的行为分析 Google首页最上方有一个导航条，以一些链接的形式，来在不同功能间导航，包括“网页”、“图片”、“视频”、“地图”等。 第一页是“网页”，此时链接没有下划线，黑体显示。但仍然是一个链接，点击它会刷新当前的页面。 当我们点击第二项的时候，可以看到，其他“网页”恢复为链接的形式，而我们点击的链接变成类似黑体文本的形式。 Google...
Google主页导航动画效果演示、下载及源代码解析
pocketmatrix的专栏
11-19 1373
view src link: http://www.yangfu.name/Article/GoogleBar.aspx参考Google主页的效果做的，文件中有图片和链接修改说明。DEMO: http://www.yangfu.name/Attach/GoogleBar/index.htmlDown: http://www.yangfu.name/Attach/
基于js的自适应、多样式轮播图插件（兼容IE8+、FF、chrome等主流浏览器）
weixin_30653097的博客
04-05 377
插件github地址：https://github.com/pomelott/slider-plug_in 使用方式： slider plug-in 左右滑动的自适应、多样式全能插件。多次调用时只需传入最外层盒子ID即可。 1.根据html中的Dom结构引入图片。 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度...
android仿漫画源码、抽奖转盘、Google相册、动画源码等
ld11620967的博客
12-25 782
Android精选源码android实现仿今日头条的开源项目波浪效果，实现流量的动态显示美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等android仿漫画源码android一个视差动画的引导页效果Android 仿美团app头部左右切换效果android银行卡操作步骤Android自定义View实现QQ运动积分抽奖转盘android 漂亮的动画效果android仿照Google相册的页面选
解释器、预处理、main函数
最新发布
编程语言技巧经验分享
10-07 1225
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 263
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Vue根实例、实例总结
m0_54007573的博客
10-04 594
Vue根实例、实例总结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值