Google 导航栏，很好玩，我硬是把它抠出来的

来源：互联网发布：工程计算软件编辑：程序博客网时间：2024/04/28 14:27

效果预览地址：http://www.i5school.com/codes/css/g_cn_img/g_cn.html

源文件代码如下

html文件（g_cn.html）：

<html>
<head>
<title>Google 导航栏，很好玩，我硬是把它抠出来的</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
</head>
<style type="text/css">
a{ text-decoration:none; verical-align:bottom; COLOR:#444;}
</style>
<body>
<center>
<div id="tb">
        <table cellSpacing=2 cellpadding=3 border=0>
            <tbody>
                <tr>
                    <td><a href="http://www.i5school.com/video" target=_blank>视频</a></td>
                    <td><a href="http://www.i5school.com/images" target=_blank>图片</a></td>
                    <td><a href="http://www.i5school.com/live" target=_blank>生活</a></td>
                    <td><a href="http://www.i5school.com/map" target=_blank>地图</a></td>
                    <td><a href="http://www.i5school.com/finance" target=_blank>财经</a></td>
                    <td><a href="http://www.i5school.com/translate" target=_blank>翻译<sup style="color:red;">新!</sup></a></td>
                    <td><a href="http://www.i5school.com/guide" target=_blank>网站导航</a></td>
                </tr>
            </tbody>
        </table>
</div>
</center>
<script>
    window.google={kEI:"UbGVSIeTHov66gPV6pjRCg",kEXPI:"17259,17735,18471,18547,18563,18567",kHL:"zh-CN"};
    google.y={first:[]};
    window.setTimeout(function(){
        var xjs=document.createElement('script');
        xjs.src='p7xhl-NqP_Q.js';
        document.getElementsByTagName('head')[0].appendChild(xjs)},0
    )
</script>
</body>
</html>

javascript文件（'p7xhl-NqP_Q.js）：

aaaa

(
    function()
    {
        var b=navigator.userAgent.toLowerCase();
        google.isOpera=b.indexOf("opera")!=-1;
        google.isIE=document.all&&b.indexOf("msie")!=-1&&!google.isOpera;
        google.isSafari=b.indexOf("safari")!=-1;
        google.time=function(){return(new Date).getTime()};
        
        window.google.bind=function(a,g,c){
            var d="on"+g;
            if(a.addEventListener)
                a.addEventListener(g,c,false);
            else if(a.attachEvent)a.attachEvent(d,c);
            else{
                var h=a[d];
                a[d]=function(){
                    var e=h.apply(this,arguments),f=c.apply(this,arguments);
                    return e==undefined?f:(f==undefined?e:f&&e)
                }
            }
        };
    }
)();
(
    function(){
        var k="toolbar_animation_20080715.png",l=52,m=37,n=75,o=100;
        function p(d,c,b,a,e){
            return{url:d,name:c,tooltip:b,color:a,yAdjust:e}
        }
        var q=[p("video","<font size=-1>/u89c6/u9891</font>","video","#54a70d",[2,5]),
        p("images","<font size=-1>/u56fe/u7247</font>","images","#3b79e7",[2,5]),
        p("live","<font size=-1>/u751f/u6d3b</font>","live","#96cfec",[3,7]),
        p("map","<font size=-1>/u5730/u56fe</font>","map","#e8d40f",[4,9]),
        p("finance","<font size=-1>/u8d22/u7ecf</font>","finance","#54c77a",[3,7]),
        p("translate",'<font size=-1>/u7ffb/u8bd1<sup style="color:red;">new!</sup></font>',"translate","#54a70d",[2,5]),
        p("guide","<font size=-1>/u7f51/u7ad9/u5bfc/u822a</font>","guide","#d93c08",[2,5])],r=[];
        function s(d,c){
            while(c&&d!=c)c=c.parentNode;return c==d
        }
        function u(d,c){
            return function(b){
                b=b||window.event;
                var a=r[c],e=d=="mouseover",
                g=b.target||b.srcElement,
                f=b.relatedTarget||(e?b.fromElement:b.toElement),
                h=!f||s(a.element,f),i=s(a.element,g);
                if(e&&!h||!e&&(!f||i&&!h)){
                    var j=a.icon;
                    j.mouseTimeout=window.clearTimeout(j.mouseTimeout);
                    var t=e?1:-1;
                    if(j.b!=t)j.mouseTimeout=window.setTimeout(j.e(t,undefined),e?o/3:o)
                }
            }
        }
                
        function v(d,c,b){
            google.bind(d,c,u(c,b))
        }
    
        function w(d,c,b){
            this.c=d;
            var a=document.createElement("div"),e=d.color,
            g="background-color:"+e,
            f="width:1px;height:1px;"+g+";float:",
            h='<div style="height:1px;overflow:hidden"><div style="'+f+'left"></div><div style="'+f+'right"></div></div>',
            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="'+c+'" 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:'+e+'">'+h+'<div style="margin:0 auto;white-space:nowrap;padding:.2em 0 0"><font size=-1><span>'+b+"</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 '+-d.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("+k+")";
            this.element=a.firstChild;
            var j=r.length;
            r.push({icon:d,element:this.element});
            v(this.element,"mouseover",j);
            v(this.element,"mouseout",j)
        }
    
        w.prototype.play=function(d){
            var c=this.c.element.firstChild,b={left:-c.offsetLeft,top:0};
            while(c){b.left+=c.offsetLeft;b.top+=c.offsetTop;c=c.offsetParent}
            var a=this.element.style;
            if(a.display=="none"){a.visibility="hidden";a.display="block"}
            var e=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.c.element.parentNode.offsetWidth)/2;
            b.top-=e-3;b.top+=20*Math.pow(1-d/this.c.frames,3);
            a.left=b.left+"px";
            a.top=b.top+"px";
            if(d==0||this.c.b<0)a.display="none";
            else{
                a.display="";
                var f=d/this.c.frames;
                if("opacity"in a)a.opacity=f;
            else if("MozOpacity"in a)a.MozOpacity=f;
            else if("KhtmlOpacity"in a)a.KhtmlOpacity=f;
            else if("filter"in a)a.filter="alpha(opacity="+f*100+")"}
        };
    
        function x(d,c,b,a,e){
            this.element=d;
            this.mouseTimeout=null;
            this.frames=c.length-1;
            this.spriteCoordinateList=c;
            this.color=b;
            this.d=null;
            this.g=d.getElementsByTagName("div")[1];
            this.i=new w(this,a,e);
            this.b=-1;
            this.a=1;
            var g=r.length;
            r.push({icon:this,element:d});
            v(d,"mouseover",g);
            v(d,"mouseout",g)
        }
    
        x.prototype.e=function(d,c){
            var b=this;
            return function(){b.f(d,c)}
        };
    
        x.prototype.f=function(d,c){
            if(d){
                this.b=d;
                this.mouseTimeout=window.clearTimeout(this.mouseTimeout);
                this.d=window.clearTimeout(this.d)
            }
            typeof c!="undefined"&&(this.a=c);
            var b=this.spriteCoordinateList[this.a];
            this.g.style.backgroundPosition=-b.x+"px "+-b.y+"px";
            this.i.play(this.a);
            var a=this.element.getElementsByTagName("font")[0].style;
            if(this.b<0){a.color="#444";a.textDecoration="none"}else{a.color=this.color;a.textDecoration="underline"}
            this.a+=this.b;
            if(this.a>this.frames)this.a=this.frames-1;
            else if(this.a<0)this.a=1;
            else this.d=window.setTimeout(this.e(undefined,undefined),n)
        };
            
        google.y.first.push(function(){
            try{document.execCommand("BackgroundImageCache",false,true)}catch(d){}
            var c='<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0"><tr>';
            for(var b=0;b<q.length;++b){
                var a=q[b];
                a.url="http://www.i5school.com/"+encodeURIComponent(a.url);
                var e=[],g=m*b;
                for(var f=0;f<7;++f)
                    if(f>4)e.push({x:l*4,y:g-a.yAdjust[f-5]});
                    else e.push({x:l*f,y:g});a.coordinates=e;c+='<td valign=bottom style="text-align:center;padding:0 .35em 0 .4em;margin:0;cursor:pointer;cursor:hand"><a style="color:#444;text-decoration:none;vertical-align:bottom" 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">'+a.name+"</span></div></a></td>"
            }
            c+="</tr></table>";
            var h=document.getElementById("tb");
            h.innerHTML=c;
            var i=h.getElementsByTagName("a");
            for(var b=0;b<i.length;++b){
                i[b].firstChild.firstChild.style.backgroundImage="url("+k+")";
                new x(i[b],q[b].coordinates,q[b].color,q[b].url,q[b].tooltip)
            }
        });
    }
)();
if(google.y.first){
    for(var a=0,b;b=google.y.first[a];++a)b();
        delete google.y.first
}
for(a in google.y)google.y[a][1]?google.y[a][1].apply(google.y[a][0]):google.y[a][0].go();
google.x=function(d,c){c&&c.apply(d);return false};

还有背景图，