菜单效果

【实例简介】

一款漂亮，实用的ＪＳ菜单效果

【实例截图】

【核心代码】

// JavaScript Document
 

function fx(el,attr,to){
  el=typeof el=='string'?document.getElementById(el):el;
  if(to>0)el.style.display='block';
  var w=el['offset' attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))];
  var Int=Math[to-w>0?'ceil':'floor'];
  clearInterval(el.timer);
  el.timer=setInterval(function(){
  w =Int((to-w)*0.1);
  el.style[attr]=w 'px';
  if(w==to){   
  if(to==0)el.style.display='none';
  clearInterval(el.timer);
  }; 
  },10);
 };
 window.onload = function (){
  var a=document.getElementById("t1");
  var b=document.getElementById("t2");
  var c=document.getElementById("t3");
     var d=document.getElementById("t4");
  var e=document.getElementById("t5");
  var d1=document.getElementById("div1");
  var d2=document.getElementById("div2");
  var d3=document.getElementById("div3");
  var d4=document.getElementById("div4");
  var d5=document.getElementById("div5");
  d1.onmouseover=a.onmouseover=function (){fx('div1','height',70)};
  d1.onmouseout=a.onmouseout=function (){fx('div1','height',0)};
  d2.onmouseover=b.onmouseover=function (){fx('div2','height',70)};
  d2.onmouseout=b.onmouseout=function (){fx('div2','height',0)};
  d3.onmouseover=c.onmouseover=function (){fx('div3','height',70)};
  d3.onmouseout=c.onmouseout=function (){fx('div3','height',0)};
     d4.onmouseover=d.onmouseover=function (){fx('div4','height',70)};
  d4.onmouseout=d.onmouseout=function (){fx('div4','height',0)};
  d5.onmouseover=e.onmouseover=function (){fx('div5','height',70)};
  d5.onmouseout=e.onmouseout=function (){fx('div5','height',0)}; 
  
 
 
}