好久没写文章了，过完春节人也变得更懒惰了。还是年前同事提起google首页下面几个小点点跳动的动画怎么实现的问题，拖到现在才整理一下。
以前还没怎么在意google下面的这个googleBar，以为只是几个好玩的动画图片而已，但仔细看来，竟然这些玄妙的动画效果仅仅来源于一张图片：
奥妙之处就在于javascript和style的混合运用。通常，我们在HTML中可以用background-image给一个元素设置一个背景图片，并且用background-repeat来指定北京图是否平铺或者拉伸等，但我们也可以用background-position来指定只显示背景图中指定区域，即不将整个图片做北京，而取图片的一部分作为背景。googleBar里就用了很多类似于这样的style设置：
Code<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写出来了。不过，这个代码还是有点问题，特别是从一个点直接移动到另一个点时就不能分别处理各自的动画。
Code<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="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="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="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="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>
</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,4)" onmouseout="MouseHandler(false,this,4)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=4&source=cwh&q=http%3A%2F%2Ffinance.google.cn%2F" target=_blank>
<div>
<div style="52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -148px 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,5)" onmouseout="MouseHandler(false,this,5)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=5&source=cwh&q=http%3A%2F%2Ftranslate.google.cn%2Ftranslate_t%3Fhl%3Dzh-CN" target=_blank>
<div>
<div style="52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -185px 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,6)" onmouseout="MouseHandler(false,this,6)" style="color:#444;text-decoration:none;vertical-align:bottom" href="http://www.google.cn/url?ct=pro&cd=6&source=cwh&q=http%3A%2F%2Fdaohang.google.cn%2F" target=_blank>
<div>
<div style="52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background:no-repeat 0 -222px 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>
</tr>
</table>
<!--------- ToolTip 部分 ----------------->
<DIV id="ToolTip0" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="BORDER-RIGHT: #54a70d 1px solid; BORDER-BOTTOM-COLOR: #54a70d; BORDER-LEFT: #54a70d 1px solid; BORDER-TOP-COLOR: #54a70d; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px 0px 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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip1" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="BORDER-RIGHT: #3b79e7 1px solid; BORDER-BOTTOM-COLOR: #3b79e7; BORDER-LEFT: #3b79e7 1px solid; BORDER-TOP-COLOR: #3b79e7; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #3b79e7"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -37px 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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip2" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="BORDER-RIGHT: #96cfec 1px solid; BORDER-BOTTOM-COLOR: #96cfec; BORDER-LEFT: #96cfec 1px solid; BORDER-TOP-COLOR: #96cfec; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #96cfec"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip3" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="BORDER-RIGHT: #e8d40f 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #e8d40f 1px solid; BORDER-TOP-COLOR: #e8d40f; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #e8d40f"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -111px 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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip4" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="BORDER-RIGHT: #ea504c 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #ea504c 1px solid; BORDER-TOP-COLOR: #ea504c; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #ea504c"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -148px 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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip5" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="BORDER-RIGHT: #54a70d 1px solid; BORDER-BOTTOM-COLOR: #e8d40f; BORDER-LEFT: #54a70d 1px solid; BORDER-TOP-COLOR: #54a70d; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #54a70d"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -185px 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>
</DIV>
</A>
</DIV>
<DIV id="ToolTip6" style="DISPLAY: none; Z-INDEX: 2; BACKGROUND: #fff; LEFT: 0px; CURSOR: hand; POSITION: absolute; TOP: 0px">
<A style="COLOR: #444; TEXT-DECORATION: none" href="http://www.google.cn/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" target=_blank>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
<DIV style="BORDER-RIGHT: #d93c08 1px solid; BORDER-BOTTOM-COLOR: #d93c08; BORDER-LEFT: #d93c08 1px solid; BORDER-TOP-COLOR: #d93c08; TEXT-ALIGN: center">
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
</DIV>
<DIV style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 0.2em; WHITE-SPACE: nowrap">
<FONT size=-1><SPAN>搜索热门网络视频 </SPAN></FONT>
</DIV>
<DIV style="OVERFLOW: hidden; HEIGHT: 1px">
<DIV style="FLOAT: left; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
<DIV style="FLOAT: right; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
</DIV>
</DIV>
<DIV style="MARGIN: 0px 1px; OVERFLOW: hidden; HEIGHT: 1px; BACKGROUND-COLOR: #d93c08"></DIV>
<DIV style="HEIGHT: 4px" align=center>
<DIV style="Z-INDEX: 3; BACKGROUND: no-repeat -260px -222px 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>
</DIV>
</A>
</DIV>
</body>
</html>