原本以为google首页的动画是动画图片，后来发现是用js写的。

好奇，就仿着google首页的动画用jquery试着写了个。

难点就在切图和定位上。

下面讲一下这两个难点。

切图 ：

a ：

这里我拉了些参考线，便于看得更清楚些。每个方框里的宽度高度都相同。然后用setTimeout延时，间隔相等的时间去改变背景图片的位置，连贯起来看起来就像是个小flash动画

1. for(var i=0; i<5; i++){  


2.             setTimeout("navScrollBg(" + i + "," + index +","+flag+")",40 * i);    


3.         }  

for(var i=0; i<5; i++){

			setTimeout("navScrollBg(" + i + "," + index +","+flag+")",40 * i);  

		}

这里的i<5是看这个动画有几步，如上图是5步。

b ：mourseover和mourseout的动画顺序刚好相反，利用数组排序

1. var a=[0,52,104,156,208];     


2.         var spans = $("#info_" + index).find("span");  


3.         if(flag == 0){  


4.             spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");              


5.         }  


6.         else{  


7.             a.sort(function(b,c){return c-b;});           


8.             spans.css("background-position",(0 - a[i]) + "px" + " " + (0-((index-1)*37)) +"px");  


9.         }  

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

		}

 当flag=0，var a=[0,52,104,156,208];

 当flag=1，var a=[208,156,104,52,0];

定位 ：

对于（上图）icon上方的文字描述的圆角背景框

1.如果圆角框做成背景图就没什么难的

2.如果用css写个圆角框，还是个比较新鲜的尝试（平时做圆角框都是切图的，因为切图简单些）。

google首页的圆角框是用css写的，为了练一下技术，我也用css尝试了下，无非就是要多加几个标签。如下：

• 7
• 挖它!