Google 首页代码分析及简评

来源：互联网发布：网易云课堂软件编辑：程序博客网时间：2024/05/01 18:07

Google.cn 首页界面简洁，尤其是中下部“视频”“图片”“生活”等小图标的动画效果还很炫目。

几乎天天打开 google.cn 页面，有没有想到看看这个页面的 Html 代码是什么样子？当试图分析其 Html 代码时会发现，虽然页面看起来简单，但代码并不是想像的那么简单！

分析其代码发现：

以<Div>和表格混合布局，并不是所谓的纯粹的 XHTML <Div>+CSS “Web标准”布局；

标签的属性也不用 "" 或 '' 括起来。

使用 Javascript 的比较生僻的语句形式，比如 window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"}

Javascript 代码写的晦涩难懂，变量用单个字母表示，意义不明确，是为了显示技巧高超，还是为了“保密”？

“视频”“图片”……等地方的效果不是用 Html 代码构建，而是用纯粹的 js 代码构造，不知道是手工写的，还是用什么工具完成的？

本人把“很炫目”那部分的代码扣了下来，效果还在，但还是 js 脚本的形式。本人没有进一步深入分析，想进一步分析的可以自己做，希望能把新的与大家共享。

其实“很炫目”的那个效果并没用很玄的编程技巧，无非就是把类似动画帧的几个图片按时间顺序分别显示了一下，做出了动感的效果。大家看一下图片就能意识到。但具体怎么实现还要看代码。

这段代码还有值得学习的地方，例如判断浏览器类型的代码就很不错，毕竟是 Google 的东西嘛，不但搜索引擎世界第一，而且以玩 Javascript 而闻名于世。

以下代码是我简化后留下的，我认为与动画效果有关的部分。

Google.htm 文件代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
<script> //Google 的代码，也不加 language="javascript"呀
    //window.google = {kEI:"oCDVSLaCH4vu6gOGmLm0CA",kEXPI:"17259,17735",kHL:"zh-CN"};
    //以上代码是 Google 原来的代码，作用是建立一个对象。相当于以下4句代码：
    google = new Object;
    google.kEI="oCDVSLaCH4vu6gOGmLm0CA";
    google.kEXPI="17259,17735";
    google.kHL="zh-CN";
</script>
</head>

<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<center>
<div id="tb"></div>
</center>
</body>
<script>
google.y={first:[]};
window.setTimeout( //在这里加载 wt_QGEYUfoQ.js 脚本文件
    function()
    {
      var xjs=document.createElement('script');
      xjs.src='wt_QGEYUfoQ.js';
      document.getElementsByTagName('head')[0].appendChild(xjs);
    }, 0);

/*google.y.first.push(
    function()
    {
      google.ac.i(document.f,document.f.q,'','');
    }
)*/
google.xjs_ready=1;
</script>

</html>

wt_QGEYUfoQ.js脚本代码：

(
function()
{
    var e=navigator.userAgent.toLowerCase();
    google.isOpera=e.indexOf("opera")!=-1;
    google.isIE=document.all&&e.indexOf("msie")!=-1&&!google.isOpera;google.isSafari=e.indexOf("safari")!=-1;
    //google.time=function(){return(new Date).getTime()};
    //google.log=function(a,b){(new Image).src="/gen_204?atyp=i&ct="+a+"&cad="+b+"&zx="+google.time()};
    //google.xhr=function(){var a=null;if(window.XMLHttpRequest)try{a=new XMLHttpRequest}catch(b){}else if(window.ActiveXObject)for(var d=0,c;c=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"][d++];)try{a=new ActiveXObject(c);break}catch(b){}return a};
    window.google.bind=function(a,b,d)
      {
        var c="on"+b;
        if(a.addEventListener)
          a.addEventListener(b,d,false);
        else
          if(a.attachEvent)
            a.attachEvent(c,d);
          else
          {
            var h=a[c];
            a[c]=function()
              {
                var f=h.apply(this,arguments),g=d.apply(this,arguments);
                return f==undefined?g:(g==undefined?f:g&&f)
               }
           }
       };
}
)();

(
function()
{
    var k="images/toolbar_animation_20080807.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("http://video.google.cn/","<font size=-1>/u89c6/u9891</font>","/u641c/u7d22/u70ed/u95e8/u7f51/u7edc/u89c6/u9891","#54a70d",[2,5]),p("http://images.google.cn/","<font size=-1>/u56fe/u7247</font>","/u641c/u7d22/u5168/u7403/u7684/u56fe/u7247","#3b79e7",[2,5]),p("http://shenghuo.google.cn/","<font size=-1>/u751f/u6d3b</font>","/u641c/u7d22/u60a8/u8eab/u8fb9/u7684/u5206/u7c7b/u751f/u6d3b/u4fe1/u606f",
           "#96cfec",[3,7]),p("http://ditu.google.cn/","<font size=-1>/u5730/u56fe</font>","/u67e5/u8be2/u5730/u5740/u3001/u635c/u7d22/u5468/u8fb9/u548c/u89c4/u5212/u8def/u7ebf","#e8d40f",[4,9]),p("http://finance.google.cn/","<font size=-1>/u8d22/u7ecf</font>","/u5546/u4e1a/u4fe1/u606f/u3001/u8d22/u7ecf/u65b0/u95fb/u3001/u5b9e/u65f6/u80a1/u4ef7/u548c/u52a8/u6001/u56fe/u8868","#ea504c",[3,7]),p("http://translate.google.cn/translate_t?hl=zh-CN","<font size=-1>/u7ffb/u8bd1</font>","/u5728/u7ebf/u7ffb/u8bd1/u5916/u6587/u6bb5/u843d/u3001/u7f51/u9875/u3001/u641c/u7d22/u7ed3/u679c",
           "#54a70d",[2,5]),p("http://daohang.google.cn/","<font size=-1>/u7f51/u7ad9/u5bfc/u822a</font>","/u7f51/u5740/u5927/u5168/uff0c/u5feb/u901f/u76f4/u8fbe/u5e38/u7528/u7f51/u7ad9","#d93c08",[2,5])],
        r=[];

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

function v(d,c,b)
{google.bind(d,c,u(c,b))}

    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="/url?ct=pro&cd="+b+"&source=cwh&q="+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)
        }
      }
    );
}
)();

google.doFirst=function()
    { if(!google.xjs_ready)
        window.setTimeout(google.doFirst,10);
      else
      { if(google.y.first)
        { for(var a=0,b;b=google.y.first[a];++a)
            b();
          delete google.y.first
        }
        for(var 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
          }
      }
    };

google.doFirst();