鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

来源：动视网责编：小采时间：2020-11-27 21:06:10

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单:会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。移动菜单，层菜单moveMenu .alpha { FILTER: Alpha(Opacity=80) } .td1 { FONT-SIZE:

推荐度：

点击下载本文 文档为doc格式

导读鼠标触发移动的分层菜单层菜单moveMenu_导航菜单:会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片。移动菜单，层菜单moveMenu .alpha { FILTER: Alpha(Opacity=80) } .td1 { FONT-SIZE:

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

<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> 
 
//建议使用IE5.0以上应用本代码. 
//**************************************************** 
//用数组来存储多个timeOut标识. 
tBack=new Array(5); 
tOut=new Array(5); 
//激活当前选项卡. 
function menuOut(whichMenu){ 
var curMenu=eval("menu"+whichMenu); 
curMenu.runtimeStyle.zIndex=6; 
clearTimeout(tBack[whichMenu]); 
moveOut(whichMenu); 
} 
//恢复初始状态. 
function menuBack(whichMenu){ 
var curMenu=eval("menu"+whichMenu); 
curMenu.runtimeStyle.zIndex=curMenu.style.zIndex; 
clearTimeout(tOut[whichMenu]); 
moveBack(whichMenu); 
} 
//移动当前选项卡 
function moveOut(curNum){ 
var curMenu=eval("menu"+curNum); 
if(curMenu.style.posLeft>0) { 
curMenu.style.posLeft-=2; 
tOut[curNum]=setTimeout("moveOut('"+curNum+"')",1); 
} 
} 
//移回选项卡. 
function moveBack(curNum){ 
var curMenu=eval("menu"+curNum); 
if(curMenu.style.posLeft<30) { 
curMenu.style.posLeft+=2; 
tBack[curNum]=setTimeout("moveBack('"+curNum+"')",1); 
} 
} 
//鼠标移过时改变表格单元式样。 
function swapClass(){ 
var o=event.srcElement; 
if(o.className=="td1") o.className="td2" 
else if(o.className=="td2") o.className="td1"; 
} 
document.onmouseover=swapClass; 
document.onmouseout=swapClass; 
 
<META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> 
<BODY bgColor=#ffffff leftMargin=0 text=#000000 topMargin=0 marginheight="0" 
marginwidth="0"> 
 
 
 
<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> 
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="https://www.gxlcms.com/jscss/demoimg/201212/stang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡一</TD></TR></TBODY></TABLE> 
 
 
<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> 
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="https://www.gxlcms.com/jscss/demoimg/201212/stang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡二</TD></TR></TBODY></TABLE> 
 
 
<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> 
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="https://www.gxlcms.com/jscss/demoimg/201212/stang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡三</TD></TR></TBODY></TABLE> 
 
 
<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> 
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="https://www.gxlcms.com/jscss/demoimg/201212/stang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡四</TD></TR></TBODY></TABLE> 
 
 
<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> 
<TABLE border=0 cellPadding=0 cellSpacing=0 width=100> 
<TBODY> 
<TR> 
<TD height=18 width=14><IMG height=18 src="https://www.gxlcms.com/jscss/demoimg/201212/stang.gif" 
width=14></TD> 
<TD bgColor=#99ccff class=cardtitle height=14 
width=86>选项卡五</TD></TR></TBODY></TABLE> 
</BODY></HTML>

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

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

推荐度：

点击下载本文 文档为doc格式

标签：导航菜单鼠标

热门焦点

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

鼠标触发移动的分层菜单层菜单moveMenu_导航菜单

最新推荐

猜你喜欢

热门推荐