一个效果的实现。

google上的搜索下面的视频。图片。翻译什么的，点在上面图片是动态的，如何实现的？
我看了下是那东西DIV，背景色是图片.怎么鼠标以上去是动态的？

解决方案 »

  1.   

    CSS 配合 JS 脚本实现的 
    你可以去查一下CSS Sprites的相关内容
      

  2.   

    这是我的理解：
    一张图里有很多“零件”图
    每个“导航按钮”的背景图都是这个图片，只不过background-position:x y;的值不同，来定位显示不同的“零件”
    事先得到各个“零件”显示所需的background-position:x y;
    JS函数对每个“导航按钮”onmouseover时，会按顺序改变背景图的x y，模拟出动态效果。
    或者把各零件坐标定义到很多class里，class命名科学一点，就可以用js按顺序切换按钮的class来达到效果具体代码，搜索“google <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title>测试效果</title>
    <style type="text/css">
    body {text-align:center}
    table {border:1px solid #eeeeee;padding:3px 0;border-bottom-width:5px}
    .icon td {width:50px;height:37px;background-image:url(http://www.sosuo8.com/article/upimages3/svc_sprite_all.gif);cursor:pointer;}
    .capt td {font:normal 11px verdana;padding:2px 0}
    .def{background-position:0px}
    </style>
    <script language="javascript" type="text/javascript">
    (function (bool) {
         if (bool) {
             HTMLElement.prototype.__defineGetter__("currentStyle", function () {
                 return this.ownerDocument.defaultView.getComputedStyle(this, null);
             });
         }
    })(/Firefox/.test(window.navigator.userAgent));window.onload=function(){
    var tt=document.getElementsByTagName('table')[0];
    var cs=tt.rows[1].cells,ct=tt.rows[0].cells;
    for(var i=0;i<cs.length;i++)
        cssAni(cs[i],ct[i],7,300,i);
    try
    {
          document.execCommand("BackgroundImageCache",false,true)
    }
    catch(c)
    {
    }
    }function setAllTd(tdObj,index){
    var position = "undefined" == typeof tdObj.currentStyle.backgroundPosition ? tdObj.currentStyle.backgroundPositionX + " " + tdObj.currentStyle.backgroundPositionY : tdObj.currentStyle.backgroundPosition ;
    var posArr = position.split(" ");
    switch(index+1){
          case 1 : posArr[1] = "0px";break;
          case 2 : posArr[1] = "-37px";break;
          case 3 : posArr[1] = "-74px";break;
          case 4 : posArr[1] = "-111px";break;
          case 5 : posArr[1] = "-148px";break;
          case 6 : posArr[1] = "-185px";break;
          case 7 : posArr[1] = "-222px";break;
    } 
    tdObj.style.backgroundPosition = posArr[0]+" "+posArr[1];
    }function cssAni(osrc,otarget,num,duration,index){
    setAllTd(otarget,index);
    var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num);var s=otarget.className.replace(/.$/,''),r=/over/;
    osrc.onmouseover=osrc.onmouseout=otarget.onmouseover=otarget.onmouseout=function(e){
        n=r.test((e||event).type)?1:-1;
        if(!t) t=setInterval(function(){
          if (d!=n&&c!=1&&c!=num)
          {
            d=n;
          }
          if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))
              return clearInterval(t),t=null;
          var position = "undefined" == typeof otarget.currentStyle.backgroundPosition ? otarget.currentStyle.backgroundPositionX + " " +otarget.currentStyle.backgroundPositionY :otarget.currentStyle.backgroundPosition ;
          var posArr = position.split(" ");
          switch(c+=d){
              case 1 : posArr [0] = "0px";break;
              case 2 : posArr [0] = "-51px";break;
       case 3 : posArr [0] = "-101px";break;
       case 4 : posArr [0] = "-153px";break;
       case 5 : posArr [0] = "-205px";break;
       case 6 : posArr [0] = "-257px";break;
       case 7 : posArr [0] = "-309px";break;
          }
          //c+=d;
          //alert(posArr[0]+" "+posArr[1]);
          otarget.style.backgroundPosition = posArr[0]+" "+posArr[1];
          
          //otarget.className=s+(c+=d);
          //alert("i:"+i+" "+"s:"+s+" "+"c:"+c+" "+"d:"+d+" "+"n:"+n+" "+"r:"+r);
        },i);
    };
    }</script>
    </head>
    <body>
    <table>
    <tr class='icon'>
        <td class='def'></td>
        <td class='def'></td>
        <td class='def'></td>
        <td class='def'></td>
        <td class='def'></td>
        <td class='def'></td>
        <td class='def'></td>
    </tr>
    <tr class='capt'>
        <td><a href='#;'>A</a></td>
        <td><a href='#;'>B</a></td>
        <td><a href='#;'>C</a></td>
        <td><a href='#;'>D</a></td>
        <td><a href='#;'>E</a></td>
        <td><a href='#;'>F</a></td>
        <td><a href='#;'>G</a></td>
    </tr>
    </table>
    </body>
    </html>