好久没写文章了，过完春节人也变得更懒惰了。还是年前同事提起google首页下面几个小点点跳动的动画怎么实现的问题，拖到现在才整理一下。
以前还没怎么在意google下面的这个googleBar，以为只是几个好玩的动画图片而已，但仔细看来，竟然这些玄妙的动画效果仅仅来源于一张图片：
奥妙之处就在于javascript和style的混合运用。通常，我们在HTML中可以用background-image给一个元素设置一个背景图片，并且用background-repeat来指定北京图是否平铺或者拉伸等，但我们也可以用background-position来指定只显示背景图中指定区域，即不将整个图片做北京，而取图片的一部分作为背景。googleBar里就用了很多类似于这样的style设置：
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -74px url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png); MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 8px; POSITION: relative; TOP: -1px; HEIGHT: 4px"></DIV>
Google的源代码很冗长，且经过了代码压缩和混淆处理，看起来很吃力。不过，我还是耐心的看完了它的js代码，可以看得出来它做了很好的封装。为了能更好的直白的理解其实现原理，我写了一个简易的程序来实现它，我写得确实非常简易和原始，几乎没有任何封装，而且将google里自动生成组装html部分我直接将html写出来了。不过，这个代码还是有点问题，特别是从一个点直接移动到另一个点时就不能分别处理各自的动画。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>简易Google Bar演示</title>
</head>
<body>
<script>
var item; //当前项
var itemIndex; //当前Item的序号
var timeout = null;
var isMouseOver = false;
var curStep = 0
var delay = 75 //动作间断时间
//各项目的设置:色彩及运动中背景图的坐标集合
var itemSettings =[
{ itemColor:"#54a70d", coordinate:[[0,0],[52,0],[104,0],[156,0],[208,0],[208,-2],[208,-5]] },
{ itemColor:"#3b79e7", coordinate:[[0,37],[52,37],[104,37],[156,37],[208,37],[208,35],[208,32]] },
{ itemColor:"#96cfec", coordinate:[[0,74],[52,74],[104,74],[156,74],[208,74],[208,71],[208,67]] },
{ itemColor:"#e8d40f", coordinate:[[0,111],[52,111],[104,111],[156,111],[208,111],[208,107],[208,102]] },
{ itemColor:"#ea504c", coordinate:[[0,148],[52,148],[104,148],[156,148],[208,148],[208,145],[208,141]] },
{ itemColor:"#54a70d", coordinate:[[0,185],[52,185],[104,185],[156,185],[208,185],[208,183],[208,180]] },
{ itemColor:"#d93c08", coordinate:[[0,222],[52,222],[104,222],[156,222],[208,222],[208,220],[208,217]] }
];
function MouseHandler( _isMouseOver, _item, _itemIndex )
{
isMouseOver = _isMouseOver;
item = _item ;
itemIndex = _itemIndex;
timeout = window.clearTimeout( timeout )
timeout = setTimeout( DisplayNextStep,isMouseOver ? delay:0);
}
function DisplayNextStep()
{
timeout = window.clearTimeout( timeout );
if( isMouseOver )
curStep++;
else
curStep--;
if( curStep > itemSettings[itemIndex].coordinate.length-1)
{
curStep = itemSettings[itemIndex].coordinate.length-1;
return;
}
if( curStep < 0 )
{
curStep = 0;
return;
}
//图标动作
var imageStyle = item.getElementsByTagName("div")[1].style;
imageStyle.backgroundPosition = -itemSettings[itemIndex].coordinate[curStep][0]+"px " + -itemSettings[itemIndex].coordinate[curStep][1] + "px";
//文字样式改变
var fontStyle = item.getElementsByTagName("font")[0].style;
if( isMouseOver )
{
fontStyle.color = itemSettings[itemIndex].itemColor ;
fontStyle.textDecoration = "underline"
}
else
{
fontStyle.color = "#444";
fontStyle.textDecoration = "none"
}
//显示ToolTip
ShowToolTip();
//准备下一个动作
timeout = setTimeout( DisplayNextStep,delay);
}
function ShowToolTip()
{
var toolTip = document.getElementById("ToolTip" + itemIndex);
//计算item的绝对坐标
var objNode = item.firstChild;
var position = {left:-objNode.offsetLeft, top:0}
while(objNode )
{
position.left += objNode.offsetLeft;
position.top += objNode.offsetTop;
objNode = objNode.offsetParent
}
//获取ToolTip的长宽
if(toolTip.style.display == "none")
{
toolTip.style.visibility = "hidden";
toolTip.style.display = "block"
}
var height = toolTip.offsetHeight;
var width = toolTip.getElementsByTagName("span")[0].offsetWidth + 14;
if(toolTip.style.visibility == "hidden")
{
toolTip.style.display = "none";
toolTip.style.visibility = "visible"
}
//设置ToolTip的位置
position.left -= (width - item.parentNode.offsetWidth)/2;
position.top -= height - 3;
position.top += 20 * Math.pow(1 - curStep / itemSettings[itemIndex].coordinate.length, 3);
toolTip.style.left = position.left + "px";
toolTip.style.top = position.top + "px";
toolTip.style.width = width;
//设置ToolTip的显示状态
if( !isMouseOver )
toolTip.style.display = "none";
else
{
toolTip.style.display = "";
toolTip.style.filter = "alpha(opacity=" + curStep/itemSettings[itemIndex].coordinate.length * 100 + ")";
}
}
</script>
<!----------Google Bar 部分---------------->
<table style="margin:2em auto;border-collapse:collapse;line-height:1.4em" cellpadding="3" cellspacing="2" border="0">
<tr>
<td width="20px"></td>
<td valign=bottom style="text-align:center;padding:0.35em 0.4em;margin:0;cursor:pointer;cursor:hand">
<a onmouseover="MouseHandler(true,this,0)" onmouseout="MouseHandler(false,this,0)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<div>
<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0px 0px url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png)"></div>
<span style="white-space:nowrap">
<font size=-1>视频</font>
</span>
</div>
</a>
</td>
<td valign=bottom style="text-align:center;padding:0.35em 0.4em;margin:0;cursor:pointer;cursor:hand">
<a onmouseover="MouseHandler(true,this,1)" onmouseout="MouseHandler(false,this,1)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=1&source=cwh&q=http%3A%2F%2Fimages.google.cn%2F"
target=_blank>
<div>
<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -37px url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png)">
</div>
<span style="white-space:nowrap">
<font size=-1>图片</font>
</span>
</div>
</a>
</td>
<td valign=bottom style="text-align:center;padding:0.35em 0.4em;margin:0;cursor:pointer;cursor:hand">
<a onmouseover="MouseHandler(true,this,2)" onmouseout="MouseHandler(false,this,2)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=2&source=cwh&q=http%3A%2F%2Fshenghuo.google.cn%2F" target=_blank>
<div>
<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -74px url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png)">
</div>
<span style="white-space:nowrap">
<font size=-1>生活</font>
</span>
</div>
</a>
</td>
<td valign=bottom style="text-align:center;padding:0.35em 0.4em;margin:0;cursor:pointer;cursor:hand">
<a onmouseover="MouseHandler(true,this,3)" onmouseout="MouseHandler(false,this,3)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=3&source=cwh&q=http%3A%2F%2Fditu.google.cn%2F" target=_blank>
<div>
<div style="width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -111px url(http://www.google.cn/intl/zh-CN/images/toolbar_animation_20080807.png)">
</div>
<span style="white-space:nowrap">
<font size=-1>地图</font>
</span>