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


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


难点就在切图和定位上。


 


下面讲一下这两个难点。


切图


a


 



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


 




Js代码 复制代码


  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的动画顺序刚好相反,利用数组排序


 




Js代码 复制代码


  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尝试了下,无非就是要多加几个标签。如下:



[阅读全文...]

挖上一个精彩
挖客给您推荐更多精彩!
挖下一个精彩

这些挖客臭味相投 · · · · · ·


挖客说 · · · · · ·

得分: 1 访客 在2008年12月31日提交

东西挺好,但什么破网站啊,点下载要注册,注册了还要到邮箱激活,激活了才知道要三天后才能下载,三天后黄花菜都凉了,真垃圾,再也不来了
第1楼

得分: 0 访客 在2008年12月31日提交

javaeye也不如以前了
第2楼

 

匿名评论
(文明上网,承担一切因您的行为而直接或间接导致的法律责任)

 

 
合作伙伴:   网易科技   赛迪社区   千龙科技   265上网导航   刷刷   动态网站制作指南   煎蛋   新新web2.0   9Fav就喜欢网   Linux桌面中文网   我爱水煮鱼   乐婴网
  天涯海阁   DigiArt   掘图志   cngadget   17Fav   桑林志   91新鲜网   奇事奇物网   搜酷全球