仿google首页导航菜单

Question

简单改就是这样的：<script>
var hP=[0,-52,-104,-156,-208,-260,-312];
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
var gM = Class.create();
gM.prototype = {
  initialize:function(vP,url,description) {
var TO,i=0;
    var d=document.createElement("div");
    var a=document.createElement("a");
    var s=document.createElement("span");
    var t=document.createTextNode(description);
    s.style.backgroundPosition="left "+vP+"px";
    a.setAttribute("href",url);
    a.appendChild(s);
    a.appendChild(t);
    d.appendChild(a);
    document.body.appendChild (d);
    a.onmouseover=function() {
      if(i<hP.length)  {
        s.style.backgroundPosition=hP[i]+"px "+vP+"px";
        i++;
        TO=setTimeout(arguments.callee,60);
      }
      else  clearTimeout(TO);
    };
    a.onmouseout=function() {
      clearTimeout(TO);
      if(i>0) {
        s.style.backgroundPosition=hP[i-1]+"px "+vP+"px";
        i--;
        TO=setTimeout(arguments.callee,60);
      }
      else  clearTimeout(TO);
    };
  } //,
}
function init() {
new gM('0','#','Gmail');
new gM('-37','#','Calendar');
new gM('-74','#','Toolbar');
new gM('-111','#','Desktop');
new gM('-148','#','Picasa');
new gM('-185','#','Gtalk');
new gM('-222','#','Notebook');
}
window.onload=init;
</script>
<style>
a {
  text-decoration:none;
  display:inline;
  float:left;
  line-height:60px;
}
div {
  width:120px;float:left;
}
span {
  width:52px;
  height:37px;
  background:url(http://www.google.co.kr/ig/f/AaEyQnOaAr4/intl/ALL_kr/svc_sprite_all.gif ) no-repeat left top;
  float:left;
}
</style>

Answer 1

不好意思，刚有个显示问题：<style>
a {
  text-decoration:none;
  display:block;
  float:left;
  line-height:60px;
  width:80px;
}
div {
  width:120px;float:left;
}
span {
  width:52px;
  height:37px;
  background:url(http://www.google.co.kr/ig/f/AaEyQnOaAr4/intl/ALL_kr/svc_sprite_all.gif ) no-repeat left top;
  float:left;
}
</style><script language='javascript'>
var hP=[0,-52,-104,-156,-208,-260,-312];
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
var gM = Class.create();
gM.prototype = {
  initialize:function(vP,url,description) {
var TO,i=0;
    var d=document.createElement("div");
    var a=document.createElement("a");
    var s=document.createElement("span");
    var t=document.createTextNode(description);
    s.style.backgroundPosition="left "+vP+"px";
    a.setAttribute("href",url);
    a.appendChild(s);
    a.appendChild(t);
    d.appendChild(a);
    document.body.appendChild (d);
    a.onmouseover=function() {
      if(i<hP.length)  {
        s.style.backgroundPosition=hP[i]+"px "+vP+"px";
        i++;
        TO=setTimeout(arguments.callee,60);
      }
      else  clearTimeout(TO);
    };
    a.onmouseout=function() {
      clearTimeout(TO);
      if(i>0) {
        s.style.backgroundPosition=hP[i-1]+"px "+vP+"px";
        i--;
        TO=setTimeout(arguments.callee,60);
      }
      else  clearTimeout(TO);
    };
  } //,
}
function init() {
new gM('0','#','Gmail');
new gM('-37','#','Calendar');
new gM('-74','#','Toolbar');
new gM('-111','#','Desktop');
new gM('-148','#','Picasa');
new gM('-185','#','Gtalk');
new gM('-222','#','Notebook');
}
window.onload=init;
</script>