山寨版的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> </span>视频</a> </li>
3 <li id="info_2"><a href="#"><span> </span>图片</a> </li>
4 <li id="info_3"><a href="#"><span> </span>生活</a> </li>
5 <li id="info_4"><a href="#"><span> </span>地图</a> </li>
6 <li id="info_5"><a href="#"><span> </span>财经</a> </li>
7</ul>
8<p> </p>
9<p> </p>
10<style type="text/css">
11
*{padding:0;margin:0;}
12#nav{margin:0 auto;width:440px;clear:both;overflow:hidden;padding-left:15px;}
13#nav li{padding:15px 0;width:52px;float:left;text-align:center;margin-right:10px;list-style:none;}
14#nav li a{display:block;cursor:pointer;color:#333;text-decoration:none;}
15#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;}
16
#nav li a:hover{text-decoration:underline;}
17#nav li#info_1 a:hover{color:#54a70d;}
18#nav li#info_2 a:hover{color:#3c78e6;}
19#nav li#info_3 a:hover{color:#96cfec;}
20#nav li#info_4 a:hover{color:#e8d50f;}
21#nav li#info_5 a:hover{color:#ea4f4b;}
22#nav li#info_1 a span{background-position:0 0;}
23#nav li#info_2 a span{background-position:0 -37px;}
24#nav li#info_3 a span{background-position:0 -74px;}
25#nav li#info_4 a span{background-position:0 -111px;}
26#nav li#info_5 a span{background-position:0 -148px;}
27
</style>
28<script language="javascript">
29 $(document).ready(function(){
30 $("ul li a").each(function(index){
31 $(this).hover(function(){
32 onBg(index+1,0);
33
},
34 function(){
35 onBg(index+1,1);
36 });
37 });
38 })
39
40 function navScrollBg(i,index,flag) {
41 var a=[0,52,104,156,208];
42 var spans = $("#info_" + index).find("span");
43 if(flag == 0){
44 spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");
45 }
46 else{
47 a.sort(function(b,c){return c-b;});
48 spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");
49 }
50 }
51 function onBg(index,flag){
52 for(var i=0; i<5; i++){
53 setTimeout("navScrollBg(" + i + "," + index +","+flag+")",60 * i);
54 }
55 }
56
</script>
<ul id="nav">2
<li id="info_1"><a href="#"><span> </span>视频</a> </li>3
<li id="info_2"><a href="#"><span> </span>图片</a> </li>4
<li id="info_3"><a href="#"><span> </span>生活</a> </li>5
<li id="info_4"><a href="#"><span> </span>地图</a> </li>6
<li id="info_5"><a href="#"><span> </span>财经</a> </li>7
</ul>8
<p> </p>9
<p> </p>10
<style type="text/css">11
*{padding:0;margin:0;}
12
#nav{margin:0 auto;width:440px;clear:both;overflow:hidden;padding-left:15px;}13
#nav li{padding:15px 0;width:52px;float:left;text-align:center;margin-right:10px;list-style:none;}14
#nav li a{display:block;cursor:pointer;color:#333;text-decoration:none;}15
#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;}16
#nav li a:hover{text-decoration:underline;}
17
#nav li#info_1 a:hover{color:#54a70d;}18
#nav li#info_2 a:hover{color:#3c78e6;}19
#nav li#info_3 a:hover{color:#96cfec;}20
#nav li#info_4 a:hover{color:#e8d50f;}21
#nav li#info_5 a:hover{color:#ea4f4b;}22
#nav li#info_1 a span{background-position:0 0;}23
#nav li#info_2 a span{background-position:0 -37px;}24
#nav li#info_3 a span{background-position:0 -74px;}25
#nav li#info_4 a span{background-position:0 -111px;}26
#nav li#info_5 a span{background-position:0 -148px;}27
</style>28
<script language="javascript"> 29
$(document).ready(function(){30
$("ul li a").each(function(index){ 31
$(this).hover(function(){ 32
onBg(index+1,0);33
},34
function(){ 35
onBg(index+1,1);36
}); 37
});38
}) 39
40
function navScrollBg(i,index,flag) {41
var a=[0,52,104,156,208]; 42
var spans = $("#info_" + index).find("span");43
if(flag == 0){44
spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px"); 45
}46
else{47
a.sort(function(b,c){return c-b;}); 48
spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");49
}50
}51
function onBg(index,flag){52
for(var i=0; i<5; i++){53
setTimeout("navScrollBg(" + i + "," + index +","+flag+")",60 * i); 54
}55
}56
</script>
注意的是，如果需要在博客中展示，需要把span全部替换为div，添加Jquery的压缩源码。最好还要注意给div添加一个class，对应地修改$("ul li a.classname")，因为在页面中有多个$("ul li a")存在。
