山寨版的google首页动画

 一直以来，我都认为google首页搜索栏下动画效果是flash，直到某天师傅告诉我利用CSS实现图片切换的时候，我才体会到有如此简单优雅的方法实现动画，现在借用这个例子来测试在博客园中实现JS的demo.

• 视频
• 图片
• 生活
• 地图
• 财经

 

如果你能看到上面的动画效果，那么我成功了~貌似很简单，但是回想整个过程可真是有血有泪~

1. 博客园的编辑器会过滤掉部分的标签，例如这里总是把我的span标签过滤掉，害我抓狂了N久.....

2. 发表文章中的JS不能调用外部（例如在页首html代码中添加Jquery）的Jquery文件.....只有在文章中添加了Jqeury的压缩源码，有更好的办法麻烦告诉我一下~

3. 最后言归正传，我转一个Jquery版的google首页动画代码~（我google搜得，然后稍微修改了一下，呵呵）

 

 1<ul id="nav">
 2    <li id="info_1"><a href="#"><span>&nbsp;</span>视频</a> </li>
 3    <li id="info_2"><a href="#"><span>&nbsp;</span>图片</a> </li>
 4    <li id="info_3"><a href="#"><span>&nbsp;</span>生活</a> </li>
 5    <li id="info_4"><a href="#"><span>&nbsp;</span>地图</a> </li>
 6    <li id="info_5"><a href="#"><span>&nbsp;</span>财经</a> </li>
 7</ul>
 8<p>&nbsp;</p>
 9<p>&nbsp;</p>
<style type="text/css">
*{padding:0;margin:0;}
#nav{margin:0 auto;width:440px;clear:both;overflow:hidden;padding-left:15px;}
#nav li{padding:15px 0;width:52px;float:left;text-align:center;margin-right:10px;list-style:none;}
#nav li a{display:block;cursor:pointer;color:#333;text-decoration:none;}
#nav li a span{background:url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20090216.png) no-repeat;display:block;width:52px;height:37px;margin-bottom:15px;}
#nav li a:hover{text-decoration:underline;}
#nav li#info_1 a:hover{color:#54a70d;}
#nav li#info_2 a:hover{color:#3c78e6;}
#nav li#info_3 a:hover{color:#96cfec;}
#nav li#info_4 a:hover{color:#e8d50f;}
#nav li#info_5 a:hover{color:#ea4f4b;}
#nav li#info_1 a span{background-position:0 0;}
#nav li#info_2 a span{background-position:0 -37px;}
#nav li#info_3 a span{background-position:0 -74px;}
#nav li#info_4 a span{background-position:0 -111px;}
#nav li#info_5 a span{background-position:0 -148px;}
</style>
<script language="javascript"> 
 $(document).ready(function(){
  $("ul li a").each(function(index){ 
       $(this).hover(function(){  
            onBg(index+1,0);
       },
       function(){   
            onBg(index+1,1);
       }); 
  });
 }) 
 
 function navScrollBg(i,index,flag) {
  var a=[0,52,104,156,208]; 
  var spans = $("#info_" + index).find("span");
  if(flag == 0){
   spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");   
  }
  else{
   a.sort(function(b,c){return c-b;});   
   spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");
  }
 }
 function onBg(index,flag){
  for(var i=0; i<5; i++){
   setTimeout("navScrollBg(" + i + "," + index +","+flag+")",60 * i);  
  }
 }
</script>

 

注意的是，如果需要在博客中展示，需要把span全部替换为div，添加Jquery的压缩源码。最好还要注意给div添加一个class，对应地修改$("ul li a.classname")，因为在页面中有多个$("ul li a")存在。