google曾经的首页小图标，JS+CSS实现的动画效果

今天在蓝色，一篇介绍减少页面图片请求次数的文章引起了我的注意，确切说是一张图片。

源代码下载：https://files.cnblogs.com/rednut/google图标动画.rar

 

这个才注意到，原来是背景图实现的动画效果，刚好找到了一个演示地址： http://demo.rexsong.com/200705/google_korea/

突然有了自己模拟一个的想法，说干就干：

本例并没有把上面的提示文字实现，有兴趣的朋友可以自己增加。

xhtml:

<a id="menu" class="m1" href="#">
       <span>Gmail</span>
</a>

 

CSS:

html,body{ font-family:Arial;}
#menu{ width:52px; height:37px; float:left; display:block; cursor:pointer; position:relative;}
.m1{ background:url(04.gif) no-repeat 0 0;}/*图片地址请根据实际情况自行替换，下同*/
.m2{ background:url(04.gif) no-repeat -50px 0;}
.m3{ background:url(04.gif) no-repeat -103px 0;}
.m4{ background:url(04.gif) no-repeat -155px 0;}
.m5{ background:url(04.gif) no-repeat -208px 0;}
.m6{ background:url(04.gif) no-repeat -260px 0;}
#menu span{ width:100%; font-size:12px; float:left; clear:both; text-align:center; position:absolute; bottom:-15px;}
#menu:link, #menu:visited{ color:#666; text-decoration:none;}
#menu:hover, #menu:active{ color:#f00; text-decoration:underline;}

 

JS:

 

var menu = document.getElementById("menu");
var i=1; //用于存储当前显示的为第几个样式
var temp1,temp2; //用于清空setInterval值的临时变量，如果不清空则会冲突

//鼠标滑过事件
menu.onmouseover = function(){
      if ( temp2 != null ){
      clearInterval(temp2);  
       }
       function nowOver(){
            menu.className = "m"+i;
            if(i<6){
                  i++;
            }
            else{
                  i=6; 
            }
      }
       temp1 = setInterval(nowOver,50);
}

//鼠标离开事件
menu.onmouseout = function(){
      if ( temp1 != null ){
            clearInterval(temp1);  

      }
      function nowOut(){
            menu.className = "m"+i;
            if(i>1){
                  i--;
            }
            else{
                  i=1;
            }
      }
      temp2 = setInterval(nowOut,50);
}