WEB开发网
开发学院网页设计JavaScript Google 首页代码分析及简评 阅读

Google 首页代码分析及简评

 2010-09-14 13:09:06 来源:WEB开发网   
核心提示: wt_QGEYUfoQ.js脚本代码:(function(){var e=navigator.userAgent.toLowerCase();google.isOpera=e.indexOf("opera")!=-1;google.isIE=document.all&&

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>u89c6u9891</font>","u641cu7d22u70edu95e8u7f51u7edcu89c6u9891","#54a70d",[2,5]),p("http://images.google.cn/","<font size=-1>u56feu7247</font>","u641cu7d22u5168u7403u7684u56feu7247","#3b79e7",[2,5]),p("http://shenghuo.google.cn/","<font size=-1>u751fu6d3b</font>","u641cu7d22u60a8u8eabu8fb9u7684u5206u7c7bu751fu6d3bu4fe1u606f",
      "#96cfec",[3,7]),p("http://ditu.google.cn/","<font size=-1>u5730u56fe</font>","u67e5u8be2u5730u5740u3001u635cu7d22u5468u8fb9u548cu89c4u5212u8defu7ebf","#e8d40f",[4,9]),p("http://finance.google.cn/","<font size=-1>u8d22u7ecf</font>","u5546u4e1au4fe1u606fu3001u8d22u7ecfu65b0u95fbu3001u5b9eu65f6u80a1u4ef7u548cu52a8u6001u56feu8868","#ea504c",[3,7]),p("http://translate.google.cn/translate_t?hl=zh-CN","<font size=-1>u7ffbu8bd1</font>","u5728u7ebfu7ffbu8bd1u5916u6587u6bb5u843du3001u7f51u9875u3001u641cu7d22u7ed3u679c",
      "#54a70d",[2,5]),p("http://daohang.google.cn/","<font size=-1>u7f51u7ad9u5bfcu822a</font>","u7f51u5740u5927u5168uff0cu5febu901fu76f4u8fbeu5e38u7528u7f51u7ad9","#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="/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();

Google首页代码的重点应当是搜索那部分的功能实现。本人只是对中下部的那个动画效果感兴趣。顺便评价了几句,抛砖引玉,希望大家深入分析后分享你们的心得。我说了,这些js代码看起来晦涩。但完全看懂肯定是可以的。

上一页  1 2 3 

Tags:Google 首页 代码

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接