鼠标触发移动的分层菜单层菜单moveMenu

　　会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML><HEAD><TITLE>移动菜单，层菜单moveMenu</TITLE> 
<META content="text/html; charset=gb2312" http-equiv=Content-Type> 
<STYLE type=text/css>.alpha { 
FILTER: Alpha(Opacity=80) 
} 
.td1 { 
FONT-SIZE: 12px 
} 
.td2 { 
BACKGROUND-COLOR: #ccffff; CURSOR: hand; FONT-SIZE: 12px 
} 
.maskl { 
OVERFLOW: hidden 
} 
.cardtitle { 
BORDER-BOTTOM: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: default; FONT-SIZE: 12px; TEXT-INDENT: 4pt 
} 
.cardbottom { 
BACKGROUND-COLOR: #99ccff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; FILTER: Alpha(Opacity=90) 
} 
</STYLE> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20language%3DJscript%3E%20%0D%0A%2F%2F%E5%BB%BA%E8%AE%AE%E4%BD%BF%E7%94%A8IE5.0%E4%BB%A5%E4%B8%8A%E5%BA%94%E7%94%A8%E6%9C%AC%E4%BB%A3%E7%A0%81.%20%0D%0A%2F%2F****************************************************%20%0D%0A%2F%2F%E7%94%A8%E6%95%B0%E7%BB%84%E6%9D%A5%E5%AD%98%E5%82%A8%E5%A4%9A%E4%B8%AAtimeOut%E6%A0%87%E8%AF%86.%20%0D%0AtBack%3Dnew%20Array(5)%3B%20%0D%0AtOut%3Dnew%20Array(5)%3B%20%0D%0A%2F%2F%E6%BF%80%E6%B4%BB%E5%BD%93%E5%89%8D%E9%80%89%E9%A1%B9%E5%8D%A1.%20%0D%0Afunction%20menuOut(whichMenu)%7B%20%0D%0Avar%20curMenu%3Deval(%22menu%22%2BwhichMenu)%3B%20%0D%0AcurMenu.runtimeStyle.zIndex%3D6%3B%20%0D%0AclearTimeout(tBack%5BwhichMenu%5D)%3B%20%0D%0AmoveOut(whichMenu)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E6%81%A2%E5%A4%8D%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81.%20%0D%0Afunction%20menuBack(whichMenu)%7B%20%0D%0Avar%20curMenu%3Deval(%22menu%22%2BwhichMenu)%3B%20%0D%0AcurMenu.runtimeStyle.zIndex%3DcurMenu.style.zIndex%3B%20%0D%0AclearTimeout(tOut%5BwhichMenu%5D)%3B%20%0D%0AmoveBack(whichMenu)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%BD%93%E5%89%8D%E9%80%89%E9%A1%B9%E5%8D%A1%20%0D%0Afunction%20moveOut(curNum)%7B%20%0D%0Avar%20curMenu%3Deval(%22menu%22%2BcurNum)%3B%20%0D%0Aif(curMenu.style.posLeft%3E0)%20%7B%20%0D%0AcurMenu.style.posLeft-%3D2%3B%20%0D%0AtOut%5BcurNum%5D%3DsetTimeout(%22moveOut('%22%2BcurNum%2B%22')%22%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E7%A7%BB%E5%9B%9E%E9%80%89%E9%A1%B9%E5%8D%A1.%20%0D%0Afunction%20moveBack(curNum)%7B%20%0D%0Avar%20curMenu%3Deval(%22menu%22%2BcurNum)%3B%20%0D%0Aif(curMenu.style.posLeft%3C30)%20%7B%20%0D%0AcurMenu.style.posLeft%2B%3D2%3B%20%0D%0AtBack%5BcurNum%5D%3DsetTimeout(%22moveBack('%22%2BcurNum%2B%22')%22%2C1)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E8%BF%87%E6%97%B6%E6%94%B9%E5%8F%98%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E5%BC%8F%E6%A0%B7%E3%80%82%20%0D%0Afunction%20swapClass()%7B%20%0D%0Avar%20o%3Devent.srcElement%3B%20%0D%0Aif(o.className%3D%3D%22td1%22)%20o.className%3D%22td2%22%20%0D%0Aelse%20if(o.className%3D%3D%22td2%22)%20o.className%3D%22td1%22%3B%20%0D%0A%7D%20%0D%0Adocument.onmouseover%3DswapClass%3B%20%0D%0Adocument.onmouseout%3DswapClass%3B%20%0D%0A%3C%2FSCRIPT%3E"> 
<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> 
<BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" 
marginwidth="0"> 
<DIV class=maskl id=menuPos 
style="HEIGHT: 216px; LEFT: 115px; POSITION: absolute; TOP: 59px; WIDTH: 132px; Z-INDEX: 1"> 
<DIV id=menu1 onmouseout=menuBack(1) onmouseover=menuOut(1) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 0px; WIDTH: 130px; Z-INDEX: 1"> 
<DIV class=cardbottom id=Layer1 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> 
<table align=center border=0 height="100%" width=75> 
<TBODY> 
<TR> 
<TD class=td1>选项一</TD></TR> 
<TR> 
<TD class=td1>选项二</TD></TR> 
<TR> 
<TD class=td1>选项三</TD></TR> 
<TR> 
<TD class=td1>选项四</TD></TR> 
<TR> 
<TD> </TD></TR></TBODY></TABLE></DIV> 
<table border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" _ewebeditor_ta_src="%2Fjscss%2Fdemoimg%2F201212%2Fstang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡一</TD></TR></TBODY></TABLE></DIV> 
<DIV id=menu2 onmouseout=menuBack(2) onmouseover=menuOut(2) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 20px; WIDTH: 130px; Z-INDEX: 1"> 
<DIV class=cardbottom id=Layer2 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> 
<table align=center border=0 height="100%" width=75> 
<TBODY> 
<TR> 
<TD class=td1>选项一</TD></TR> 
<TR> 
<TD class=td1>选项二</TD></TR> 
<TR> 
<TD class=td1>选项三</TD></TR> 
<TR> 
<TD class=td1>选项四</TD></TR> 
<TR> 
<TD> </TD></TR></TBODY></TABLE></DIV> 
<table border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" _ewebeditor_ta_src="%2Fjscss%2Fdemoimg%2F201212%2Fstang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡二</TD></TR></TBODY></TABLE></DIV> 
<DIV id=menu3 onmouseout=menuBack(3) onmouseover=menuOut(3) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 40px; WIDTH: 130px; Z-INDEX: 1"> 
<DIV class=cardbottom id=Layer3 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> 
<table align=center border=0 height="100%" width=75> 
<TBODY> 
<TR> 
<TD class=td1>选项一</TD></TR> 
<TR> 
<TD class=td1>选项二</TD></TR> 
<TR> 
<TD class=td1>选项三</TD></TR> 
<TR> 
<TD class=td1>选项四</TD></TR> 
<TR> 
<TD> </TD></TR></TBODY></TABLE></DIV> 
<table border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" _ewebeditor_ta_src="%2Fjscss%2Fdemoimg%2F201212%2Fstang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡三</TD></TR></TBODY></TABLE></DIV> 
<DIV id=menu4 onmouseout=menuBack(4) onmouseover=menuOut(4) 
style="HEIGHT: 20px; LEFT: 30px; POSITION: absolute; TOP: 60px; WIDTH: 130px; Z-INDEX: 1"> 
<DIV class=cardbottom id=Layer4 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> 
<table align=center border=0 height="100%" width=75> 
<TBODY> 
<TR> 
<TD class=td1>选项一</TD></TR> 
<TR> 
<TD class=td1>选项二</TD></TR> 
<TR> 
<TD class=td1>选项三</TD></TR> 
<TR> 
<TD class=td1>选项四</TD></TR> 
<TR> 
<TD> </TD></TR></TBODY></TABLE></DIV> 
<table border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" _ewebeditor_ta_src="%2Fjscss%2Fdemoimg%2F201212%2Fstang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡四</TD></TR></TBODY></TABLE></DIV> 
<DIV id=menu5 onmouseout=menuBack(5) onmouseover=menuOut(5) 
style="HEIGHT: 134px; LEFT: 30px; POSITION: absolute; TOP: 80px; WIDTH: 130px; Z-INDEX: 1"> 
<DIV class=cardbottom id=Layer5 
style="HEIGHT: 115px; LEFT: 0px; POSITION: absolute; TOP: 17px; WIDTH: 100px; Z-INDEX: 1"> 
<table align=center border=0 height="100%" width=75> 
<TBODY> 
<TR> 
<TD class=td1>选项一</TD></TR> 
<TR> 
<TD class=td1>选项二</TD></TR> 
<TR> 
<TD class=td1>选项三</TD></TR> 
<TR> 
<TD class=td1>选项四</TD></TR> 
<TR> 
<TD> </TD></TR></TBODY></TABLE></DIV> 
<table border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="/jscss/demoimg/201212/stang.gif" _ewebeditor_ta_src="%2Fjscss%2Fdemoimg%2F201212%2Fstang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡五</TD></TR></TBODY></TABLE></DIV></DIV> 
</BODY></HTML>

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

教程首页更多教程

鼠标触发移动的分层菜单 层菜单moveMenu

鼠标触发移动的分层菜单层菜单moveMenu