首页 » 技术新知 » Google主页导航动画效果演示、下载及源代码解析

Google主页导航动画效果演示、下载及源代码解析

2008-08-12 14:14:142176 点击
1 评论

Google主页动态图片导航效果

参考Google主页的效果做的，文件中有图片和链接修改说明。

DEMO: http://blog.fufuok.com/Attach/GoogleBar/index.html

Down: http://blog.fufuok.com/Attach/GoogleBar/GoogleBar.rar 

该效果的代码解析如下：

  1. (function()...{  
  2.     //注册事件侦听  
  3.     function register(c,d,b)...{  
  4.         var a="on"+d;  
  5.         if(c.addEventListener)...{  
  6.             c.addEventListener(d,b,false);  
  7.         }else if(c.attachEvent)...{  
  8.             c.attachEvent(a,b);  
  9.         }else...{  
  10.             var f=c[a];  
  11.             c[a]=function()...{  
  12.                 var g=f.apply(this,arguments),e=b.apply(this,arguments);return g==undefined?e:(e==undefined?g:e&&g)  
  13.             }  
  14.         }  
  15.     };  
  16.     //n=每帧画面的高,m=每帧画面的宽  
  17.     var l="images/toolbar_animation_20080807.png",m=52,n=37,o=75,p=100;  
  18.  
  19.     //工具栏对象数据对象  
  20.     function q(c,d,b,a,f)...{  
  21.         return...{url:c,name:d,tooltip:b,color:a,yAdjust:f}  
  22.     }  
  23.     //工具栏对象数据数组  
  24.     var r=[q("http://video.google.cn/","视频","搜索热门网络视频","#54a70d",[2,5]),  
  25.         q("http://images.google.cn/","图片","搜索全球的图片","#3b79e7",[2,5]),  
  26.         q("http://news.google.cn/","资讯","跟踪社会热点，搜索最新资讯","#f3e76e",[3,7]),  
  27.         q("http://ditu.google.cn/","地图","查询地址、捜索周边和规划路线","#96cfec",[4,9]),  
  28.         q("http://blogsearch.google.cn/","博客搜索","在博客中搜索感兴趣的主题","#e6af36",[3,7]),  
  29.         q("http://www.google.cn/rebang/","热榜","查看分类热门搜索排行","#ff9202",[2,5]),  
  30.         q("http://daohang.google.cn/","网站导航","网址大全，快速直达常用网站","#d93c08",[2,5])];  
  31.  
  32.     var objectList=[];//动画对象维护列表  
  33.  
  34.     function t(c,d)...{  
  35.         while(d&&c!=d)d=d.parentNode;  
  36.         return d==c  
  37.     }  
  38.  
  39.     /**//**  
  40.      *事件响应特殊处理  
  41.      *  
  42.      *@param string eventtype 事件类型  
  43.      *@param int index 动画对象维护列表索引  
  44.      */ 
  45.     function v(eventtype,index)...{  
  46.         return function(b)...{  
  47.             b=b||window.event;  
  48.             var a=objectList[index],f=eventtype=="mouseover";  
  49.             var g=b.target||b.srcElement,e=b.relatedTarget||(f?b.fromElement:b.toElement),h=!e||t(a.element,e),i=t(a.element,g);  
  50.             if(f&&!h||!f&&(!e||i&&!h))...{  
  51.                 var j=a.icon;  
  52.                 j.mouseTimeout=window.clearTimeout(j.mouseTimeout);  
  53.                 var u=f?1:-1;  
  54.                 if(j.popup != u)j.mouseTimeout=window.setTimeout(j.doPlay(u,undefined),f?p/3:p)  
  55.             }  
  56.         }  
  57.     }  
  58.     /**//**  
  59.      *注册事件响应  
  60.      *  
  61.      *@param object element 元素  
  62.      *@param string eventtype 事件名  
  63.      *@param int index   
  64.      */ 
  65.     function addListener(element, eventtype, index)...{register(element, eventtype, v(eventtype, index))}  
  66.  
  67.     /**//**  
  68.      *工具栏提示  
  69.      *  
  70.      *@param object tbItem 工具栏项  
  71.      *@param string url 链接地址  
  72.      *@param string tipText 提示文字  
  73.      */ 
  74.     function ToobarTip(tbItem, url, tipText)...{  
  75.         this.toolbaritem = tbItem;  
  76.         var a=document.createElement("div");  
  77.         var f=c.color;  
  78.         var g="background-color:"+f;  
  79.         var e="width:1px;height:1px;"+g+";float:";  
  80.         var h='<div style="height:1px;overflow:hidden"><div style="'+e+'left"></div><div style="'+e+'right"></div></div>';  
  81.         var i="margin:0 1px;height:1px;overflow:hidden;"+g;  
  82.           
  83.         //画圆角边框，以及下部尖角  
  84.         a.innerHTML='<div style="display:none;position:absolute;top:0;left:0;z-index:2;background:#fff;cursor:pointer;cursor:hand">' 
  85.                     +'<a href="'+ url +'" style="color:#444;text-decoration:none" target=_blank>' 
  86.                         +'<div style="'+i+'"></div>' 
  87.                         +'<div style="text-align:center;border-left:1px solid;border-right:1px solid;border-color:'+f+'">' 
  88.                             +h  
  89.                             +'<div style="margin:0 auto;white-space:nowrap;padding:.2em 0 0">' 
  90.                             +'<font size=-1><span>'+tipText+'</span></font>' 
  91.                             +'</div>' 
  92.                             +h  
  93.                         +'</div>' 
  94.                         +'<div style="'+i+'"></div>' 
  95.                         +'<div style="height:4px" align="center">' 
  96.                         +'<div style="position:relative;top:-1px;z-index:3;width:8px;overflow:hidden;margin:0 auto;height:4px;background:no-repeat -260px '+ -c.spriteCoordinateList[0].y +'px"></div>' 
  97.                         +'</div>' 
  98.                     +'</a></div>';  
  99.         this.h=a.getElementsByTagName("span")[0];  
  100.         document.body.appendChild(a);  
  101.         a.firstChild.firstChild.lastChild.firstChild.style.backgroundImage="url("+l+")";//尖角  
  102.         this.element=a.firstChild;  
  103.         var j=objectList.length;  
  104.         objectList.push(...{icon:tbItem,element:this.element});  
  105.         addListener(this.element,"mouseover",j);  
  106.         addListener(this.element,"mouseout",j)  
  107.     }  
  108.       
  109.     /**//**  
  110.      *渲染指定帧的tip  
  111.      *  
  112.      *@param int framenum 帧数  
  113.      */ 
  114.     ToobarTip.prototype.play=function(framenum)...{  
  115.         var d=this.toolbaritem.element.firstChild,b=...{left:-d.offsetLeft,top:0};  
  116.         while(d)...{  
  117.             b.left+=d.offsetLeft;  
  118.             b.top+=d.offsetTop;  
  119.             d=d.offsetParent  
  120.         }  
  121.         var a=this.element.style;  
  122.         if(a.display=="none")  
  123.         ...{  
  124.             a.visibility="hidden";  
  125.             a.display="block" 
  126.         }  
  127.         var f=this.element.offsetHeight,g=this.h.offsetWidth+14;  
  128.         if(a.visibility=="hidden")  
  129.         ...{  
  130.             a.display="none";  
  131.             a.visibility="visible" 
  132.         }  
  133.         a.width=g+"px";  
  134.  
  135.         b.left -= (g - this.toolbaritem.element.parentNode.offsetWidth)/2;  
  136.         b.top -= f - 3;  
  137.         b.top += 20 * Math.pow(1-framenum/this.toolbaritem.frames,3);  
  138.         a.left = b.left+"px";  
  139.         a.top = b.top+"px";  
  140.         if(framenum == 0||this.toolbaritem.popup<0)//moveout时，tip层直接隐藏  
  141.             a.display="none";  
  142.         else...{  
  143.             a.display="";  
  144.             var e = framenum/this.toolbaritem.frames;  
  145.             if("opacity" in a)  
  146.                 a.opacity=e;  
  147.             else if("MozOpacity" in a)  
  148.                 a.MozOpacity=e;  
  149.             else if("KhtmlOpacity" in a)  
  150.                 a.KhtmlOpacity=e;  
  151.             else if("filter" in a)  
  152.                 a.filter="alpha(opacity="+e*100+")" 
  153.         }  
  154.     };  
  155.  
  156.     /**//**  
  157.      *标签  
  158.      *  
  159.      *  
  160.      */ 
  161.     function ToolbarItem(element, coordinates, color, url, tooltip)...{  
  162.         this.element = element;  
  163.         this.mouseTimeout = null;//当前执行  
  164.         this.frames = coordinates.length-1;//帧数  
  165.         this.spriteCoordinateList = coordinates;//各帧图片坐标位置  
  166.         this.color = color;//提示文字的颜色  
  167.         this.d = null;  
  168.         this.g = element.getElementsByTagName("div")[1];//动画帧显示区域  
  169.         this.tip = new ToobarTip(this, url, tooltip);//初始化动画场景  
  170.         this.popup = -1;//1=弹出，-1=收回  
  171.         this.currentFrameNum = 1;//当前动画播放帧  
  172.  
  173.         var itemIndex = objectList.length;  
  174.         objectList.push(...{icon:this,element:element});  
  175.         addListener(element, "mouseover", itemIndex);  
  176.         addListener(element, "mouseout", itemIndex);  
  177.     }  
  178.       
  179.     ToolbarItem.prototype.doPlay=function(c,d)...{  
  180.         var b=this;  
  181.         return function()...{b.play(c,d)}  
  182.     };  
  183.       
  184.     /**//**  
  185.      *渲染指定帧  
  186.      *  
  187.      *@param int ispopup 弹出或收回：1=弹出，-1=收回  
  188.      *@param int framenum 帧数  
  189.      */ 
  190.     ToolbarItem.prototype.play=function(ispopup, framenum)...{  
  191.         if(ispopup)...{  
  192.             this.popup=ispopup;  
  193.             this.mouseTimeout=window.clearTimeout(this.mouseTimeout);  
  194.             this.d=window.clearTimeout(this.d)  
  195.         }  
  196.         if(typeof framenum != "undefined")this.currentFrameNum = framenum;  
  197.           
  198.         //当前帧图片  
  199.         var b=this.spriteCoordinateList[this.currentFrameNum];//当前帧图片坐标位置  
  200.         this.g.style.backgroundPosition=-b.x+"px "+-b.y+"px";//得到当前帧的图片  
  201.         //当前帧提示层渲染  
  202.         this.tip.play(this.currentFrameNum);  
  203.           
  204.         //当前帧文字链接样式  
  205.         var a=this.element.style;  
  206.         if(this.popup<0)...{//mouseout  
  207.             a.color="#444";  
  208.             a.textDecoration="none" 
  209.         }else...{//mouseover  
  210.             a.color=this.color;  
  211.             a.textDecoration="underline" 
  212.         }  
  213.           
  214.         this.currentFrameNum += this.popup;  
  215.         if(this.currentFrameNum > this.frames)  
  216.             this.currentFrameNum = this.frames-1;  
  217.         else if(this.currentFrameNum<0)  
  218.             this.currentFrameNum = 1;  
  219.         else 
  220.             this.d=window.setTimeout(this.doPlay(undefined,undefined),o);//动画计时器  
  221.     };  
  222.  
  223.     //页面加载完毕时，初始化标签  
  224.     register(window,"load",function()...{  
  225.         try...{  
  226.             document.execCommand("BackgroundImageCache",false,true)  
  227.         }catch(c)...{}  
  228.           
  229.         var d='<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0"><tr>';  
  230.         //初始化各标签数据，及其页面代码  
  231.         for(var b=0;b<r.length;++b)...{  
  232.             var a=r[b];  
  233.             a.url="/url?ct=pro&cd="+b+"&source=cwh&q="+encodeURIComponent(a.url);  
  234.  
  235.             var f=[],g=n*b;//g=当前标签的top  
  236.             //计算各帧图片坐标位置  
  237.             for(var e=0;e<7;++e)if(e>4)f.push(...{x:m*4,y:g-a.yAdjust[e-5]});else f.push(...{x:m*e,y:g});  
  238.             a.coordinates=f;  
  239.  
  240.             d+='<td style="text-align:center;padding:0 .35em 0 .4em;margin:0;cursor:pointer;cursor:hand"><a style="color:#444;text-decoration:none;" href="'+a.url+'" target=_blank><div><div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background: no-repeat 0 '+-g+'px"></div><span style="white-space:nowrap"><font size=-1>'+a.name+"</font></span></div></a></td>" 
  241.         }  
  242.         d+="</tr></table>";  
  243.           
  244.         //获取插入点  
  245.         var h=document.getElementById("tb");  
  246.         h.innerHTML=d;  
  247.  
  248.         var i=h.getElementsByTagName("a");  
  249.         for(var b=0;b<i.length;++b)...{  
  250.             i[b].firstChild.firstChild.style.backgroundImage="url("+l+")";  
  251.             new ToolbarItem(i[b],r[b].coordinates,r[b].color,r[b].url,r[b].tooltip)  
  252.         }  
  253.     }  
  254.     );  
  255. })();  

MORE: BHCODE

Google，导航

相关文章

  1. Gravatar
    vistaqq.com
    回复2008-08-14 10:11:47
    以前用pjblog的时候，自己弄过一个，蛮耗内存的。
该博停止更新，欢迎关注主域名博客：[品味经典] www.fufuok.com