[讨论帖]google是如何做到的?

google通过一张图片一些连贯内容,就能把它变成动态的.很有意思.
本人新手,请教大家,这是如何做到的,大家一起讨论一下,也许技术并不难.
<div style="width: 52px; height: 37px; margin: 0.5em auto; cursor: pointer; background: url(&quot;/intl/zh-CN/images/toolbar_animation_20090618.png&quot;) no-repeat scroll 0pt -37px transparent;"></div>
图片-网页-代码比较一下,多么奇妙的事情.

解决方案 »

  1.   

    css sprits 全部设定一个背景图片，然后改变background-position
      

  2.   

    这个就是不停的改变background-position了
      

  3.   

    #1给的网页基本回答了我的问题.谢谢英文只能看懂部分.不过点他的一些例子很全.以后如果感兴趣,会好好研究一下.3q by phoenix
      

  4.   

    ...弱弱的问下,你是搜的,还是文摘?very useful document!!
      

  5.   

    哈哈，很早以前我写过一个，发上来：
    不过代码写的不怎么样：<html>
    <head>
    <title>wujinjian</title>
    <script type="text/javascript">
    var time;
    var time2
    function bianD(id)
    {
    if(time2!=null)
    clearTimeout(time2); time=setTimeout("bianD('"+id+"')",50); var divobj=document.getElementById(id);
    var point=divobj.style.backgroundPosition;
    var x=point.split(" ")[0].split("px")[0]-0;
    var y=point.split(" ")[1].split("px")[0]-0; if(x==-2)
    x=-52;
    else if(x==-52)
    x=-105;
    else if(x==-105)
    x=-157;
    else if(x==-157)
    x=-209;
    else if(y==-3)
    {
    y=0;
    clearTimeout(time);
    }
    else if(x==-209)
    y=-3;

    divobj.style.backgroundPosition=x+"px "+y+"px";
    } function bianX()
    {
    if(time!=null)
    clearTimeout(time); time2=setTimeout("bianX()",50); var divobj=document.getElementById("id_1");
    var point=divobj.style.backgroundPosition;
    var x=point.split(" ")[0].split("px")[0]-0; if(x==-209)
    x=-157;
    else if(x==-157)
    x=-105;
    else if(x==-105)
    x=-52;
    else if(x==-52)
    x=-2;
    else
    {
    clearTimeout(time);
    }

    divobj.style.backgroundPosition=x+"px 0px";
    }
    </script>
    </head>
    <body>
    <div id="id_1" style="width:50px;height:37px;background-position:-2px 0px;background-image:url(http://www.google.com.hk//intl/zh-CN/images/toolbar_animation_20090618.png);background-repeat:no-repeat;"
    onmouseover="bianD('id_1')" onmouseout="bianX()">
    </div>

    <br>
    <br>
    <br> </body>
    </html>