Google首页google Bar的跳动效果简易实现

最新推荐文章于 2023-05-21 13:08:54 发布
最新推荐文章于 2023-05-21 13:08:54 发布
阅读量1k 收藏 1
点赞数
分类专栏： JS&HTML&CSS 文章标签： google animation float 网络 c html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sallay/article/details/3914148
版权

     好久没写文章了，过完春节人也变得更懒惰了。还是年前同事提起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>
                    </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="width: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="width: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="width: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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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&amp;cd=0&amp;source=cwh&amp;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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

sallay
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[转][javascript] Google谷歌首页点点效果
weixin_34220179的博客
06-04 79
上周五抽空实现了一下谷歌首页（其实是韩国google先搞的）的动画效果，感觉挺有意思，在这里和大家分享下。 这个效果的思路蛮有趣的，是一个类似于我们小时候翻书动画（也叫走马灯？）的效果，将一张大的png图片每次显示一部分。 说明一下，我的实现没有google的那样精致，它最后还有一个返回一点的效果。我为了简单，省略了，呵呵。 首先，这是google用的素材图片： 这是我...
google 主页地址列表
Nixawk
02-24 2101
google.com.hk 经常被屏蔽, 着实很不方便. 简单做个可用google主页地址统计. google.eu google.ad google.ae google.af google.ag google.al google.am google.as google.az google.ba google.be google.bf google.bg goo
Google Map开发系列（十二）——定制GoogleBar --谷歌地图的本地搜索栏
ForEvErNoME专栏
07-01 3862
在提到地图上的默认控件和GMap2的设置项的时候，我都提过谷歌地图的本地搜索栏这个控件，要在地图上加上这个控件很简单，不需要调用GMap2.addControl()，只需要一句话：    map.enableGoogleBar();这样就可以在地图的左下角加上这个搜索栏了，并且替换掉了原来的谷歌Logo的图片。目前用这个搜索栏可以搜索两种类型的数据：   1、地名；   2、谷
google的网站导航
一点一点的努力~~~
03-10 382
http://daohang.google.cn/ google的网站导航，第一次看到还真是有种很惊讶的感觉，怎么google也在做这么个简单的东西。不过看了以后，还是觉得google 做网站导航，有它后台的搜索做基础，就不像一些网站只是手工添加一些链接。呵呵~~不过网站导航这东西还真是对很多对网络不熟悉的人，又不知道有什么东西要搜的人提供一个找到自己想要的东西的不错的方 阅读全文 ...
google首页按钮效果
Willko's Blog
02-08 177
之前韩国首页首先推出这个导航就引起了讨论。 实际上，这种效果非常简单，只是我们缺乏思维而已。 原理是通过背景+偏移来做到动画的，用setTimeout和backgroundPosition就可以实现动画了。 [code="js"] Untitled Document span { ...
google_nav_bar:谷歌风格的现代Google导航栏
05-12
google_nav_bar 一个现代的Google风格的导航栏，用于扑打。 GoogleNavBar是由设计并由开发的Flutter小部件。 入门 将此添加到包的pubspec.yaml文件中： ... dependencies: google_nav_bar: ^5.0.5 现在，在Dart...
基于jQuery Bar Indicator 插件实现进度条展示效果
11-25
**基于jQuery Bar Indicator 插件实现进度条展示效果** 在Web开发中，进度条是一种常见的UI元素，用于显示任务的完成状态或者数据的加载程度。`jQuery Bar Indicator` 是一个功能强大的插件，专为创建各种进度条...
Android实现状态栏(statusbar)渐变效果的示例
01-04
前言 qq最近更新搞了渐变式状态栏.然后…新需求就是要加这个.唉 先来张效果图: 常见的方式: 设置Theme,状态栏透明. ...2.为了一个statusbar的效果,然后去处理一大堆不适应,我认为是不值得的.特
顶部状态bar效果.zipIOS应用例子源码下载
03-06
首先，我们要理解在iOS中的StatusBar是通过UIStatusBarManager这个私有类来管理的，而对它的外观和行为的控制通常需要通过`UIViewController`的几个关键方法来实现。例如，`preferredStatusBarStyle`可以设置状态栏...
一个较精简的仿Google首页特效
weixin_30437847的博客
03-20 276
一直非常喜欢Google首页上那7个点的特效!今天闲暇时，从网上搜到了它的原代码，感觉太难，完全看不懂。还好找到一段较精简的仿Google首页特效的代码，相对容易点，不过还是有很多地方看不明白。看来自已的JS+CSS水品差远了。还是先收藏起来慢慢研究，希望以后能看懂~~~ 代码如下，可以直接运行： <!DOCTYPE html PUBLIC "-//W3C//DTD ...
google首页动画效果
ice-cream
12-04 272
原本以为google首页的动画是动画图片，后来发现是用js写的。 好奇，就仿着google首页的动画用jquery试着写了个。 难点就在切图和定位上。   下面讲一下这两个难点。 切图 ： a ：   这里我拉了些参考线，便于看得更清楚些。每个方框里的宽度高度都相同。然后用setTimeout延时，间隔相等的时间去改变背景图片的位置，连贯起来看起来就像是个小flash动画   for(...
在您的网站中显示Google Analytics数据
掘金安东尼
07-03 490
例 本文档介绍了如何获取Google Access令牌并使用它们将Google Analytics数据显示在我们的网站中。 示例：可以使用实例 https://newtonjoshua.com 注意：对以下所有步骤使用相同的Gmail帐户。 第1步：设置Google Analytics 请按照以下步骤在您的网站中设置Google Analytics 登录您的Google Analytics帐户。 选择“管理”选项卡。 从ACCOUNT列的下拉菜单中选择一个帐户。 从PROPERTY列的下拉菜单中选择一个属
全面开放！Google Bard使用教程
lb5482464的博客
05-21 5752
在2002.5.12举办的Google I/O发布会上，Google宣布从即日起将Bard全面开放，全球超过180个国家只要点击进入bard.google.com，无需等候就能使用。
滚动条有时不显示_「动态图」 Chrome将增加标签页预览功能 批量显示标签页并拖动调整...
weixin_39645019的博客
01-04 154
主流浏览器尽管绝大多数功能相同但也有些功能方面的差异，比如有些浏览器支持批量显示所有已加载的标签页。标签页预览与浏览器在任务栏上预览窗口内容有所有不同，这个特性最早是Microsoft Edge UWP版附带的功能。现在谷歌浏览器也要支持该功能让用户可以在打开大量标签页的情况下批量进行预览、切换或者拖动页面排序等。标签页预览示意图：这项功能在Chrome OS 上早已实现但早前并未同步到谷歌浏览器...
如何在Google Chrome浏览器中更改/设置首页和起始页？
热门推荐
cunjiu9486的博客
10-11 1万+
When the Google Chrome browser is started or a new tab is opened a default page is provided to the user. This default page is called a Homepage or Start page. They are not the same where the Start pag...
终于找到了照片里的人，google图片搜索真的很强大
weixin_33913332的博客
05-25 1558
下午，我有点笑叉，我一个自己做图像识别的，居然就没有想到用图片搜图片的网络功能，真是学了不知道用，这个脑子太钝了！刚也发现一个同事，平时画图就很犹豫很纠结的，是他的本性，原来还奇怪他找朋友脚踏两只船是不是环境改变他的，结果发现其实他平时工作上就可看出这个性格，是我自己没联想在一起考虑。现在这个搜索也是如此，还好我还是动了脑筋，虽然花了很长的时间，但终究给我是找到了。 ...
让Google更有效抓取你的网站
青春奋斗
08-22 1544
Google Sitemap是一个很有用的SEO工具，虽然出来很久了，也有一些生成Sitemap的工具，但从结果来看还不尽如人意。下面是对GoogleSitemap文件的介绍。Google 的爬虫到底能不能遍历我的站内所有页面？这是个问题。假设能遍历到每个页面，对于Google Spider来说是一件很辛苦的工作。于是Google把一部分工作量转移给WebMaster——建立符合标准的Google
取消所有timeout（chrome插件小试-推荐以及广告去除）
Dead_Rabbit6_0的博客
08-13 2773
使用setTimeout(";")来间接取消所有setTimeout
Google-谷歌新版主页http://www.zhuoqun.net/html/y2007/799.html
xu的blog
11-21 4870
11月 6th, 2007 — Dreamer 网址：http://www.google.cn/hp?sp=china在校内网zf同学的日志里发现了这个东西，我刚打开这个页面的时候有点迷糊，以为这又是哪一个模仿hao123渴望被收购的导航站点，这种站点在国内太常见了，还经常带有弹出式和浮动广告。仔细看了一下URL，才确认这确实是谷歌的新版主页，看来谷歌正在努力本地化，不过这种本地化
原生JS如何实现Vant组件库中的notice-bar的跑马灯效果
最新发布
06-13
要实现Vant组件库中的notice-bar的跑马灯效果，可以使用原生JS的定时器和CSS3动画来实现。具体步骤如下： 1. 首先，在HTML中创建notice-bar的DOM结构，例如： ``` <div class="notice-bar"> <div class="notice-...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值