效果直逼flash的Div+Css+Js菜单_javascript技巧

来源：软文情感网

效果直逼flash的Div+Css+Js菜单

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css菜单</title> 
<style> 
body{ 
background-color:#B8B8A0; 
} 
#fbtn{ 
display:none; 
overflow:hidden; 
border-style:solid; 
border-width:1px; 
border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; 
padding:1 1 1 1; 
width:115px; 
height:30px; 
} 
#fbtn_txt{ 
position:relative; 
} 
#fbtn_txt div{ 
height:30px; 
padding-top:11px; 
font-size:12px; 
color:#800080; 
text-align:center; 
cursor:hand; 
} 
#fbtn_mask{ 
background-color:#ffffff; 
position:relative; 
width:100%; 
height:100%; 
} 
</style>

</head>

<body>

G1 
good morning

G2 
good evening

M1 
my name is fireyy

M2 
mm mm i love u

G1 
good morning

G2 
good evening

M1 
my name is fireyy

M2 
mm mm i love u

var current=null; 
var t=null;

for(var i=0;i<fbtn.length;i++){ 
fbtn_txt[i].style.posTop=-30; 
fbtn_mask[i].style.posTop=-30; 
fbtn[i].index=i; 
fbtn[i].style.display="block";

fbtn[i].onmouseover=function(){ 
if(!current){ 
current=this; 
domove(this.index); 
} 
else 
if(current!=this){ 
domove(current.index); 
domove(this.index); 
current=this; 
} 
}

fbtn[i].onmouseout=function(){ 
if(event.toElement==this.parentElement&t==this){ 
domove(this.index); 
current=null; 
} 
} 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部频道

效果直逼flash的Div+Css+Js菜单_javascript技巧