1、本小程序分三个小文件：index.js,main.htm,toolbar.png.
main.htm里面有个id为tb的div，负责呈现那中很玄的效果
index.js主要负责计算展示图片的位置（坐标）和attachEvent
toolbar.png是各种效果的组合.下面就把各个文件拿出来展示一下.
2、各个文件内容
1)main.htm
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>google首页效果图</title>
<script>
google = new Object;
</script>
</head>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 topmargin=3 marginheight=3>
<center>
<div style=" margin:100px 100px 30px 100px"><img src="images/logo.gif" border="0" /></div>
<div id="tb"></div>
</center>
</body>
<script>
google.y={first:[]};
window.setTimeout( //加载index.js脚本文件
function()
{
var xjs=document.createElement('script');
xjs.src='index.js';
document.getElementsByTagName('head')[0].appendChild(xjs);
}, 0);
google.xjs_ready=1;
</script>
</html>
2)index.js
(
function()
{
//浏览器类型
var e=navigator.userAgent.toLowerCase();
//alert(e)
//是否是各种浏览器
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};
//a:color
//b:tooltip鼠标放上去的文字
//c:name网站上显示的名字
//d:url鼠标点击之后的超连接
//e:yAdjust 显示图片的位置调整
//邦定事件，onmouseover,onmouseout
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.png",l=52,m=37,n=75,o=100;
//return all the onmouseover,onmouseout,onclick info
//a:color
//b:tooltip鼠标放上去的文字
//c:name网站上显示的名字
//d:url鼠标点击之后的超连接
//e:yAdjust 显示图片的位置调整
function p(d,c,b,a,e)
{
return{url:d,name:c,tooltip:b,color:a,yAdjust:e}
}
var q=[
p("http://www.cnblogs.com/icefeeling/","<font size=-1>博客</font>","欢迎登陆我的博客","#54a70d",[2,5]),
p("http://www.cnblogs.com/icefeeling/","<font size=-1>工作室</font>","去我的工作室坐坐","#3b79e7",[2,5]),
p("http://www.cnblogs.com/icefeeling/","<font size=-1>ExtJs</font>","show一下自己的ExtJs展示程序","#96cfec",[3,7]),
p("http://www.cnblogs.com/icefeeling/","<font size=-1>成功案例</font>","成功案例展示","#e8d40f",[4,9]),
p("http://www.cnblogs.com/icefeeling/","<font size=-1>资源共享</font>","共享了一些资源","#ea504c",[3,7])
];
var r=[];
function s(url,name)
{
while(name&&url!=name)
name=name.parentNode;
return name==url;
}
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];
//alert(q[b].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>";
//document.getElementById("tb") 将要被呈现很玄效果的div
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+")";//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();
3)toolbar.png
来源：https://www.cnblogs.com/icefeeling/archive/2008/12/12/1354022.html