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

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



 

src



 

link: http://www.yangfu.name/Article/GoogleBar.aspx

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

DEMO: http://www.yangfu.name/Attach/GoogleBar/index.html

Down: http://www.yangfu.name/Attach/GoogleBar/GoogleBar.rar

该效果的代码解析如下：

(function()...{   
    //注册事件侦听   
    function register(c,d,b)...{   
        var a="on"+d;   
        if(c.addEventListener)...{   
            c.addEventListener(d,b,false);   
        }else if(c.attachEvent)...{   
            c.attachEvent(a,b);   
        }else...{   
            var f=c[a];   
            c[a]=function()...{   
                var g=f.apply(this,arguments),e=b.apply(this,arguments);return g==undefined?e:(e==undefined?g:e&&g)   
            }   
        }   
    };   
    //n=每帧画面的高,m=每帧画面的宽   
    var l="images/toolbar_animation_20080807.png",m=52,n=37,o=75,p=100;   

    //工具栏对象数据对象   
    function q(c,d,b,a,f)...{   
        return...{url:c,name:d,tooltip:b,color:a,yAdjust:f}   
    }   
    //工具栏对象数据数组   
    var r=[q("http://video.google.cn/","视频","搜索热门网络视频","#54a70d",[2,5]),   
        q("http://images.google.cn/","图片","搜索全球的图片","#3b79e7",[2,5]),   
        q("http://news.google.cn/","资讯","跟踪社会热点，搜索最新资讯","#f3e76e",[3,7]),   
        q("http://ditu.google.cn/","地图","查询地址、捜索周边和规划路线","#96cfec",[4,9]),   
        q("http://blogsearch.google.cn/","博客搜索","在博客中搜索感兴趣的主题","#e6af36",[3,7]),   
        q("http://www.google.cn/rebang/","热榜","查看分类热门搜索排行","#ff9202",[2,5]),   
        q("http://daohang.google.cn/","网站导航","网址大全，快速直达常用网站","#d93c08",[2,5])];   

    var objectList=[];//动画对象维护列表   

    function t(c,d)...{   
        while(d&&c!=d)d=d.parentNode;   
        return d==c   
    }   

    /**//**   
     *事件响应特殊处理   
     *   
     *@param string eventtype 事件类型   
     *@param int index 动画对象维护列表索引   
     */  
    function v(eventtype,index)...{   
        return function(b)...{   
            b=b||window.event;   
            var a=objectList[index],f=eventtype=="mouseover";   
            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);   
            if(f&&!h||!f&&(!e||i&&!h))...{   
                var j=a.icon;   
                j.mouseTimeout=window.clearTimeout(j.mouseTimeout);   
                var u=f?1:-1;   
                if(j.popup != u)j.mouseTimeout=window.setTimeout(j.doPlay(u,undefined),f?p/3:p)   
            }   
        }   
    }   
    /**//**   
     *注册事件响应   
     *   
     *@param object element 元素   
     *@param string eventtype 事件名   
     *@param int index    
     */  
    function addListener(element, eventtype, index)...{register(element, eventtype, v(eventtype, index))}   

    /**//**   
     *工具栏提示   
     *   
     *@param object tbItem 工具栏项   
     *@param string url 链接地址   
     *@param string tipText 提示文字   
     */  
    function ToobarTip(tbItem, url, tipText)...{   
        this.toolbaritem = tbItem;   
        var a=document.createElement("div");   
        var f=c.color;   
        var g="background-color:"+f;   
        var e="width:1px;height:1px;"+g+";float:";   
        var h='<div style="height:1px;overflow:hidden"><div style="'+e+'left"></div><div style="'+e+'right"></div></div>';   
        var i="margin:0 1px;height:1px;overflow:hidden;"+g;   
           
        //画圆角边框，以及下部尖角   
        a.innerHTML='<div style="display:none;position:absolute;top:0;left:0;z-index:2;background:#fff;cursor:pointer;cursor:hand">'  
                    +'<a href="'+ url +'" style="color:#444;text-decoration:none" target=_blank>'  
                        +'<div style="'+i+'"></div>'  
                        +'<div style="text-align:center;border-left:1px solid;border-right:1px solid;border-color:'+f+'">'  
                            +h   
                            +'<div style="margin:0 auto;white-space:nowrap;padding:.2em 0 0">'  
                            +'<font size=-1><span>'+tipText+'</span></font>'  
                            +'</div>'  
                            +h   
                        +'</div>'  
                        +'<div style="'+i+'"></div>'  
                        +'<div style="height:4px" align="center">'  
                        +'<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>'  
                        +'</div>'  
                    +'</a></div>';   
        this.h=a.getElementsByTagName("span")[0];   
        document.body.appendChild(a);   
        a.firstChild.firstChild.lastChild.firstChild.style.backgroundImage="url("+l+")";//尖角   
        this.element=a.firstChild;   
        var j=objectList.length;   
        objectList.push(...{icon:tbItem,element:this.element});   
        addListener(this.element,"mouseover",j);   
        addListener(this.element,"mouseout",j)   
    }   
       
    /**//**   
     *渲染指定帧的tip   
     *   
     *@param int framenum 帧数   
     */  
    ToobarTip.prototype.play=function(framenum)...{   
        var d=this.toolbaritem.element.firstChild,b=...{left:-d.offsetLeft,top:0};   
        while(d)...{   
            b.left+=d.offsetLeft;   
            b.top+=d.offsetTop;   
            d=d.offsetParent   
        }   
        var a=this.element.style;   
        if(a.display=="none")   
        ...{   
            a.visibility="hidden";   
            a.display="block"  
        }   
        var f=this.element.offsetHeight,g=this.h.offsetWidth+14;   
        if(a.visibility=="hidden")   
        ...{   
            a.display="none";   
            a.visibility="visible"  
        }   
        a.width=g+"px";   

        b.left -= (g - this.toolbaritem.element.parentNode.offsetWidth)/2;   
        b.top -= f - 3;   
        b.top += 20 * Math.pow(1-framenum/this.toolbaritem.frames,3);   
        a.left = b.left+"px";   
        a.top = b.top+"px";   
        if(framenum == 0||this.toolbaritem.popup<0)//moveout时，tip层直接隐藏   
            a.display="none";   
        else...{   
            a.display="";   
            var e = framenum/this.toolbaritem.frames;   
            if("opacity" in a)   
                a.opacity=e;   
            else if("MozOpacity" in a)   
                a.MozOpacity=e;   
            else if("KhtmlOpacity" in a)   
                a.KhtmlOpacity=e;   
            else if("filter" in a)   
                a.filter="alpha(opacity="+e*100+")"  
        }   
    };   

    /**//**   
     *标签   
     *   
     *   
     */  
    function ToolbarItem(element, coordinates, color, url, tooltip)...{   
        this.element = element;   
        this.mouseTimeout = null;//当前执行   
        this.frames = coordinates.length-1;//帧数   
        this.spriteCoordinateList = coordinates;//各帧图片坐标位置   
        this.color = color;//提示文字的颜色   
        this.d = null;   
        this.g = element.getElementsByTagName("div")[1];//动画帧显示区域   
        this.tip = new ToobarTip(this, url, tooltip);//初始化动画场景   
        this.popup = -1;//1=弹出，-1=收回   
        this.currentFrameNum = 1;//当前动画播放帧   

        var itemIndex = objectList.length;   
        objectList.push(...{icon:this,element:element});   
        addListener(element, "mouseover", itemIndex);   
        addListener(element, "mouseout", itemIndex);   
    }   
       
    ToolbarItem.prototype.doPlay=function(c,d)...{   
        var b=this;   
        return function()...{b.play(c,d)}   
    };   
       
    /**//**   
     *渲染指定帧   
     *   
     *@param int ispopup 弹出或收回：1=弹出，-1=收回   
     *@param int framenum 帧数   
     */  
    ToolbarItem.prototype.play=function(ispopup, framenum)...{   
        if(ispopup)...{   
            this.popup=ispopup;   
            this.mouseTimeout=window.clearTimeout(this.mouseTimeout);   
            this.d=window.clearTimeout(this.d)   
        }   
        if(typeof framenum != "undefined")this.currentFrameNum = framenum;   
           
        //当前帧图片   
        var b=this.spriteCoordinateList[this.currentFrameNum];//当前帧图片坐标位置   
        this.g.style.backgroundPosition=-b.x+"px "+-b.y+"px";//得到当前帧的图片   
        //当前帧提示层渲染   
        this.tip.play(this.currentFrameNum);   
           
        //当前帧文字链接样式   
        var a=this.element.style;   
        if(this.popup<0)...{//mouseout   
            a.color="#444";   
            a.textDecoration="none"  
        }else...{//mouseover   
            a.color=this.color;   
            a.textDecoration="underline"  
        }   
           
        this.currentFrameNum += this.popup;   
        if(this.currentFrameNum > this.frames)   
            this.currentFrameNum = this.frames-1;   
        else if(this.currentFrameNum<0)   
            this.currentFrameNum = 1;   
        else  
            this.d=window.setTimeout(this.doPlay(undefined,undefined),o);//动画计时器   
    };   

    //页面加载完毕时，初始化标签   
    register(window,"load",function()...{   
        try...{   
            document.execCommand("BackgroundImageCache",false,true)   
        }catch(c)...{}   
           
        var d='<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0"><tr>';   
        //初始化各标签数据，及其页面代码   
        for(var b=0;b<r.length;++b)...{   
            var a=r[b];   
            a.url="/url?ct=pro&cd="+b+"&source=cwh&q="+encodeURIComponent(a.url);   

            var f=[],g=n*b;//g=当前标签的top   
            //计算各帧图片坐标位置   
            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});   
            a.coordinates=f;   

            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>"  
        }   
        d+="</tr></table>";   
           
        //获取插入点   
        var h=document.getElementById("tb");   
        h.innerHTML=d;   

        var i=h.getElementsByTagName("a");   
        for(var b=0;b<i.length;++b)...{   
            i[b].firstChild.firstChild.style.backgroundImage="url("+l+")";   
            new ToolbarItem(i[b],r[b].coordinates,r[b].color,r[b].url,r[b].tooltip)   
        }   
    }   
    );   
})();  


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/pocketmatrix/archive/2008/11/19/3336869.aspx