首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现鼠标滑过折叠与展开菜单效果代码

Posted in Javascript onSeptember 06, 2015

本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码。分享给大家供大家参考。具体如下：

这是一款展开菜单特效，鼠标移上的时候自动展开，移走后自动折叠隐藏起来，运用了JS技术，并结合了CSS共同实现的效果。本折叠菜单类似QQ可折叠的好友列表一样，不少人喜欢这种菜单。

运行效果截图如下：

JS实现鼠标滑过折叠与展开菜单效果代码

在线演示地址如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<title>移上展开的菜单</title>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>.STYLE3 {
  FONT-SIZE: 9pt
}
* {
  PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.sam_tops_button {
  FLOAT: left
}
.sam_tops_a {
  FLOAT: left
}
BODY {
  SCROLLBAR-ARROW-COLOR: #006699; SCROLLBAR-FACE-COLOR: #dee3e7; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: white; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; SCROLLBAR-DARKSHADOW-COLOR: #98aab1; FONT-FAMILY: 宋体; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #dee3e7; FONT-SIZE: 10.8pt; SCROLLBAR-TRACK-COLOR: #efefef; SCROLLBAR-3DLIGHT-COLOR: #d1d7dc; PADDING-TOP: 0px
}
TABLE {
  COLOR: black; FONT-SIZE: 10.8pt
}
A:link {
  COLOR: black; TEXT-DECORATION: none
}
A:visited {
  COLOR: black; TEXT-DECORATION: none
}
A:hover {
  TEXT-DECORATION: none
}
.standardBtn {
  BACKGROUND-IMAGE: url(); BORDER-BOTTOM: #939eb2 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #939eb2 1px solid; WIDTH: 60px; BACKGROUND-REPEAT: repeat-x; HEIGHT: 20px; FONT-SIZE: 10.8pt; BORDER-TOP: #939eb2 1px solid; CURSOR: hand; BORDER-RIGHT: #939eb2 1px solid; PADDING-TOP: 2px
}
.standardInput {
  BORDER-BOTTOM: #253e7a 1px solid; BORDER-LEFT: #253e7a 1px solid; HEIGHT: 20px; BORDER-TOP: #253e7a 1px solid; BORDER-RIGHT: #253e7a 1px solid
}
.DialogOuter {
  BACKGROUND-COLOR: #c2ceeb
}
.DialogInner {
  BACKGROUND-COLOR: #e0e7f8
}
.FrameList_GroupAndDeptDiv {
  BORDER-BOTTOM: #eeeeee 2px solid; POSITION: relative; BORDER-LEFT: #333366 2px solid; OVERFLOW-X: auto; OVERFLOW-Y: auto; BACKGROUND-COLOR: white; WIDTH: 187px; HEIGHT: 355px; FONT-SIZE: 10.8pt; BORDER-TOP: #333366 2px solid; BORDER-RIGHT: #eeeeee 2px solid; TOP: 5px
}
.iFrameStyle {
  WIDTH: 100%; HEIGHT: 500px
}
.AdvancedSearch_SearchUtilDIV {
  BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 530px; PADDING-RIGHT: 10px; HEIGHT: 110px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 10px; LEFT: 10px
}
.AdvancedSearchEx_SearchUtilDIV {
  BORDER-BOTTOM: #333366 2px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #d2dfff; PADDING-LEFT: 10px; WIDTH: 530px; PADDING-RIGHT: 10px; HEIGHT: 80px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 2px solid; PADDING-TOP: 10px; TOP: 10px; LEFT: 10px
}
.SetAgent_setItem1 {
  TEXT-ALIGN: left; WIDTH: 420px; HEIGHT: 30px
}
.SetAgent_UtilDIV {
  BORDER-BOTTOM: #333366 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #c2ceeb; PADDING-LEFT: 10px; WIDTH: 400px; PADDING-RIGHT: 10px; HEIGHT: 190px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px
}
.SetAgent_Util1DIV {
  BORDER-BOTTOM: #333366 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #c2ceeb; PADDING-LEFT: 10px; WIDTH: 280px; PADDING-RIGHT: 10px; HEIGHT: 190px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px
}
.SetAgent_Util2DIV {
  BORDER-BOTTOM: #333366 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #c2ceeb; PADDING-LEFT: 10px; WIDTH: 220px; PADDING-RIGHT: 10px; HEIGHT: 190px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px
}
.SetAgent_Table {
  BACKGROUND-COLOR: #e0e7f8
}
.NewAttachList_OuterDIV {
  BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 720px; PADDING-RIGHT: 10px; HEIGHT: 328px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
.NewAttachList_AccListDIV {
  POSITION: relative; BACKGROUND-COLOR: white; WIDTH: 698px; HEIGHT: 285px; OVERFLOW: auto
}
.AttachList_OuterDIV {
  BORDER-BOTTOM: #333366 2px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #d2dfff; PADDING-LEFT: 10px; WIDTH: 400px; PADDING-RIGHT: 10px; HEIGHT: 200px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 2px solid; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
.AttachList_AccListDIV {
  Z-INDEX: -1; POSITION: relative; BACKGROUND-COLOR: white; WIDTH: 377px; HEIGHT: 180px; OVERFLOW: auto; TOP: -2px
}
.AttachList_InputDiv {
  BORDER-BOTTOM: #253e7a 1px solid; BORDER-LEFT: #253e7a 1px solid; BACKGROUND-COLOR: #e0e7f8; BORDER-RIGHT: #253e7a 1px solid
}
.AttachList_Td {
  BORDER-BOTTOM: #253e7a 1px solid; BORDER-LEFT: #253e7a 1px solid; HEIGHT: 22px; BORDER-TOP: #253e7a 1px solid
}
.AttachList_contentTd {
  BORDER-BOTTOM: #253e7a 1px solid; PADDING-LEFT: 5px; WORD-WRAP: break-word; CURSOR: hand
}
.StepDesc_outerDIV {
  BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 460px; PADDING-RIGHT: 10px; HEIGHT: 250px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
.StepDesc_innerDIV {
  BORDER-BOTTOM: #eeeeee 1px solid; POSITION: relative; BORDER-LEFT: #333366 1px solid; BACKGROUND-COLOR: white; WIDTH: 435px; HEIGHT: 205px; OVERFLOW: auto; BORDER-TOP: #333366 1px solid; BORDER-RIGHT: #eeeeee 1px solid; TOP: 5px
}
.SelectList_OuterDIV {
  BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 450px; PADDING-RIGHT: 10px; HEIGHT: 400px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
.SelectList_ContentDIV {
  Z-INDEX: -1; POSITION: relative; BACKGROUND-COLOR: white; WIDTH: 427px; HEIGHT: 180px; OVERFLOW: auto; TOP: -2px
}
.BtnColor {
  BACKGROUND-COLOR: #c2ceeb
}
.SelectButton_OuterDIV {
  BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 450px; PADDING-RIGHT: 10px; HEIGHT: 200px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 0px; LEFT: 0px
}
.SelectButton_ContentDIV {
  Z-INDEX: -1; POSITION: relative; BACKGROUND-COLOR: white; WIDTH: 427px; HEIGHT: 180px; OVERFLOW: auto; TOP: -2px
}
.TaskListTree2_InnerDiv {
  BACKGROUND-COLOR: #d2dfff
}
.TaskListTree2_TreeDiv {
  BORDER-BOTTOM: #eeeeee 2px solid; POSITION: relative; BORDER-LEFT: #333366 2px solid; OVERFLOW-X: auto; OVERFLOW-Y: auto; BACKGROUND-COLOR: white; WIDTH: 100%; HEIGHT: 100%; FONT-SIZE: 10.8pt; BORDER-TOP: #333366 2px solid; BORDER-RIGHT: #eeeeee 2px solid
}
.UserInfoiFrm_OuterDIV {
  Z-INDEX: -1; BORDER-BOTTOM: #333366 1px solid; POSITION: absolute; BORDER-LEFT: #333366 1px solid; PADDING-BOTTOM: 15px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 15px; WIDTH: 580px; PADDING-RIGHT: 15px; BORDER-TOP: white 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 15px; TOP: 30px; LEFT: 8px
}
.UserInfoiFrm_OutTag1DIV {
  BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BORDER-LEFT: #000000 1px solid; WIDTH: 80px; HEIGHT: 20px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TOP: 8px; LEFT: 8px
}
.UserInfoiFrm_OutTag2DIV {
  BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BORDER-LEFT: #000000 1px solid; WIDTH: 80px; HEIGHT: 20px; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; TOP: 8px; LEFT: 88px
}
.UserInfoiFrm_OnTagsDIV {
  Z-INDEX: 1; BORDER-BOTTOM: #666666 0px solid; POSITION: relative; BORDER-LEFT: #ffffff 2px solid; WIDTH: 78px; BACKGROUND: #e0e7f8; HEIGHT: 22px; BORDER-TOP: #ffffff 2px solid; CURSOR: hand; FONT-WEIGHT: bold; BORDER-RIGHT: #666666 3px solid; PADDING-TOP: 3px; TOP: 0px; LEFT: 0px
}
.UserInfoiFrm_OffTagsDIV {
  BORDER-BOTTOM: #666666 0px solid; POSITION: relative; WIDTH: 78px; BACKGROUND: #e0e7f8; BORDER-TOP: #ffffff 1px solid; CURSOR: hand; BORDER-RIGHT: #666666 0px solid; PADDING-TOP: 3px; TOP: 0px; LEFT: 0px
}
.UserInfoiFrm_BottomUtilDIV {
  POSITION: absolute; WIDTH: 590px; TOP: 390px
}
.Urge_BottomUtilDIV {
  POSITION: absolute; WIDTH: 590px; TOP: 387px
}
.FlowList_ListDIV {
  POSITION: relative; WIDTH: 300px; HEIGHT: 300px; OVERFLOW: auto; TOP: 10px
}
.FlowTrace2_TitleTable {
  BACKGROUND-COLOR: #d6d6d6; TABLE-LAYOUT: fixed
}
.FlowTrace2_TipsTd {
  TEXT-ALIGN: left; PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 150px; WORD-WRAP: break-word; BACKGROUND: url() #cde2fa fixed no-repeat right top; HEIGHT: 70px; PADDING-TOP: 5px
}
.FlowTrace2_TitleleftTd {
  TEXT-ALIGN: center; PADDING-BOTTOM: 3px; BORDER-TOP: white 1px solid; PADDING-TOP: 5px
}
.FlowTrace2_Titletd {
  TEXT-ALIGN: center; BORDER-LEFT: white 1px solid; PADDING-BOTTOM: 3px; BORDER-TOP: white 1px solid; PADDING-TOP: 5px
}
.FlowTrace2_Contenttd {
  TEXT-ALIGN: center; BORDER-LEFT: white 1px solid; PADDING-BOTTOM: 3px; WORD-WRAP: break-word; BORDER-TOP: white 1px solid; PADDING-TOP: 5px
}
.FlowTrace2_Contentlefttd {
  TEXT-ALIGN: center; PADDING-BOTTOM: 3px; BORDER-TOP: white 1px solid; PADDING-TOP: 5px
}
.FlowTrace2_StartTr {
  BACKGROUND-COLOR: #dbff8e; COLOR: #666699
}
.FlowTrace2_CheckTr {
  BACKGROUND-COLOR: #ffecb3; COLOR: #4c6f99
}
.FlowTrace2_NoteTr {
  BACKGROUND-COLOR: #a2c7ff; COLOR: #f5ffec
}
.FlowTrace2_FinishTr {
  BACKGROUND-COLOR: #ffbfbf; COLOR: 
}
.FlowTrace2_SubflowTr {
  BACKGROUND-COLOR: #d9ecff
}
.AdvancedSearchBtn {
  POSITION: relative; BACKGROUND-COLOR: rgb(77,163,248); WIDTH: 80px; HEIGHT: 20px; COLOR: black; FONT-SIZE: 10.8pt; TOP: 0px; LEFT: 0px
}
.FlowList_Table {
  BORDER-BOTTOM: #a0a0a0 1px solid; BORDER-LEFT: #a0a0a0 1px solid; BORDER-TOP: #a0a0a0 1px solid; BORDER-RIGHT: #a0a0a0 1px solid
}
.FlowList_Line1Tr {
  BACKGROUND-COLOR: #0080c0
}
.FlowList_Line2Tr {
  BACKGROUND-IMAGE: url()
}
.FlowList_TitleTd {
  PADDING-BOTTOM: 5px; BACKGROUND-COLOR: #d0e4f9; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.FlowList_ContentTr {
  BACKGROUND-COLOR: #f7f3f7
}
.FlowList_ContentTdDown {
  BORDER-BOTTOM: #e0e0e0 1px solid; BORDER-LEFT: #333366 1px solid; BACKGROUND-COLOR: #d4d0c8; WORD-WRAP: break-word; BORDER-TOP: #333366 1px solid; CURSOR: hand; BORDER-RIGHT: #e0e0e0 1px solid
}
.FlowList_ContentTdOver {
  BORDER-BOTTOM: #333366 1px solid; BORDER-LEFT: #e0e0e0 1px solid; BACKGROUND-COLOR: #d4d0c8; WORD-WRAP: break-word; BORDER-TOP: #e0e0e0 1px solid; CURSOR: hand; BORDER-RIGHT: #333366 1px solid
}
.FlowList_ContentTdOut {
  BORDER-BOTTOM: #f7f3f7 1px solid; BORDER-LEFT: #f7f3f7 1px solid; BACKGROUND-COLOR: #f7f3f7; WORD-WRAP: break-word; BORDER-TOP: #f7f3f7 1px solid; CURSOR: hand; BORDER-RIGHT: #f7f3f7 1px solid
}
.FlowList_ContentTable {
  BACKGROUND-COLOR: white; TABLE-LAYOUT: fixed
}
.getClassiFrm_TypesDiv {
  BORDER-BOTTOM: #333366 1px solid; POSITION: absolute; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 10px; WIDTH: 475px; PADDING-RIGHT: 10px; HEIGHT: 230px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 10px; TOP: 10px; LEFT: 10px
}
.getClassiFrm_ListDiv {
  BORDER-BOTTOM: gray 1px solid; POSITION: relative; BORDER-LEFT: gray 1px solid; BACKGROUND-COLOR: white; WIDTH: 450px; HEIGHT: 155px; OVERFLOW: auto; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px solid; TOP: -1px
}
.getClassiFrm_BtnDiv {
  POSITION: absolute; TEXT-ALIGN: right; WIDTH: 475px; HEIGHT: 20px; TOP: 247px; LEFT: 10px
}
.getClassiFrm_headTd {
  BORDER-BOTTOM: #253e7a 1px solid; BORDER-LEFT: #253e7a 1px solid; BACKGROUND-COLOR: #e0e7f8; HEIGHT: 22px; BORDER-TOP: #253e7a 1px solid
}
.getClassiFrm_NormalTr {
  BACKGROUND-COLOR: white; CURSOR: hand
}
.getClassiFrm_SelectedTr {
  BACKGROUND-COLOR: #fbf897; CURSOR: hand
}
.ListByType_TreeDiv {
  BACKGROUND-IMAGE: url(); BORDER-BOTTOM: #333366 1px solid; POSITION: relative; BORDER-LEFT: #333366 1px solid; PADDING-BOTTOM: 5px; BACKGROUND-COLOR: white; PADDING-LEFT: 10px; WIDTH: 135px; PADDING-RIGHT: 10px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right bottom; HEIGHT: 520px; FONT-SIZE: 10.8pt; OVERFLOW: auto; BORDER-TOP: #333366 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 5px
}
.ListByType_LineTd {
  BACKGROUND-IMAGE: url(); BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: center center; HEIGHT: 2px
}
.FieldList_ListDiv {
  BORDER-BOTTOM: gray 1px solid; POSITION: relative; BORDER-LEFT: gray 1px solid; BACKGROUND-COLOR: white; WIDTH: 473px; HEIGHT: 205px; OVERFLOW: auto; BORDER-TOP: gray 1px solid; BORDER-RIGHT: gray 1px solid; TOP: -1px
}
.Sign_OuterDIV {
  BORDER-BOTTOM: #333366 1px solid; BORDER-LEFT: #eeeeee 1px solid; PADDING-BOTTOM: 15px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 15px; WIDTH: 500px; PADDING-RIGHT: 15px; HEIGHT: 270px; BORDER-TOP: #eeeeee 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 15px
}
.SubFlow_ListDiv {
  Z-INDEX: -1; BORDER-BOTTOM: gray 0px solid; POSITION: relative; BORDER-LEFT: gray 0px solid; BACKGROUND-COLOR: white; WIDTH: 475px; HEIGHT: 235px; OVERFLOW: auto; BORDER-TOP: gray 0px solid; BORDER-RIGHT: gray 0px solid; TOP: -1px
}
.SubFlow_BtnDiv {
  POSITION: absolute; TEXT-ALIGN: right; WIDTH: 474px; HEIGHT: 20px; TOP: 298px; LEFT: 10px
}
.NoteSms_Trbg {
  BACKGROUND-IMAGE: url(); BACKGROUND-REPEAT: repeat-x; HEIGHT: 100px
}
.NoteSms_Tdbg {
  BACKGROUND-IMAGE: url(); TEXT-ALIGN: center; PADDING-BOTTOM: 3px; BACKGROUND-REPEAT: repeat-x; COLOR: #324e97; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.NoteSms_bg1 {
  TEXT-ALIGN: right; PADDING-BOTTOM: 3px; BACKGROUND-COLOR: #e3e8f3; PADDING-LEFT: 5px; VERTICAL-ALIGN: top; PADDING-TOP: 6px
}
.NoteSms_allchoice {
  BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #fbcb4b; BORDER-RIGHT: #ffffff 1px solid
}
.NoteSms_bg2 {
  BORDER-BOTTOM: #2650a6 1px dashed; BACKGROUND-COLOR: #fef8dd; HEIGHT: 28px; BORDER-TOP: #2650a6 1px dashed; PADDING-TOP: 3px
}
.SetTime_setInfo {
  BORDER-BOTTOM: #333366 1px solid; POSITION: absolute; BORDER-LEFT: #333366 1px solid; PADDING-BOTTOM: 15px; BACKGROUND-COLOR: #e0e7f8; PADDING-LEFT: 15px; WIDTH: 580px; PADDING-RIGHT: 15px; BORDER-TOP: #333366 1px solid; BORDER-RIGHT: #333366 1px solid; PADDING-TOP: 15px; TOP: 10px; LEFT: 8px
}
.SetTime_BottomUtilDIV {
  POSITION: absolute; WIDTH: 590px; TOP: 113px
}
.SetTotalTime_BottomUtilDIV {
  POSITION: absolute; WIDTH: 590px; TOP: 75px
}
.setScore_Div {
  WIDTH: 474px; HEIGHT: 205px; OVERFLOW: auto
}
.Urge_DisabledCss {
  BACKGROUND-COLOR: #d4d0c8
}
.Urge_NormalCss {
  BACKGROUND-COLOR: white
}
</STYLE>
<SCRIPT language=javascript>
function Mdown(it)
{
 it.className = "FlowList_ContentTdDown";
}
function Mover(it)
{
 it.className = "FlowList_ContentTdOver";
}
function Mout(it)
{
 it.className = "";
}
function HrefLink(sFlag,sPath)
{
 //sFlag="0";
 var w=window.screen.width-10;
 //var h=window.screen.height-55;
 var h = window.screen.availHeight-28;
 if (sFlag == '0')
 {
 var sStyle="width="+w+"px,height="+h+"px,left=0px,top=0px,scrollbars=yes,resizable=yes";
 window.open(sPath,"",sStyle);
 }
 if (sFlag == '1')
 {
 var sStyle="dialogWidth:"+w+"px;dialogHeight:"+h+"px;center:yes;status:no";
 showModalDialog(sPath,"",sStyle);
 }
}
function searchAction(){
 document.forms("SubForm").submit();
}
var falg=true;
function show(){
  document.getElementById("sam_tops").style.display="block";
}
function hide(){
  document.getElementById("sam_tops").style.display="none";
}
</SCRIPT>
<META name=GENERATOR content="MSHTML 9.00.8112.16440"></HEAD>
<BODY bottomMargin=0 leftMargin=0 rightMargin=0 scroll=no topMargin=0>
<TABLE border=0 cellSpacing=0 cellPadding=0 width=244 align=center>
 <TBODY>
 <TR>
 <TD background=images/left1b.jpg>
 <TABLE border=0 cellSpacing=0 cellPadding=0 align=center>
 <TBODY>
 <TR>
 <TD><IMG src="images/newTitle.jpg" width=244 
 height=25></TD></TR></TBODY></TABLE>
 <TABLE border=0 width="100%">
 <TBODY>
 <TR>
 <TD height=25 width=2> </TD>
 <TD vAlign=bottom width=209 
 align=left><B>人事审批</B></TD></TR></TBODY></TABLE>
 <TABLE border=0 width="95%">
 <TBODY>
 <TR>
 <TD height=30> </TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=156');" 
 width="33%"><SPAN class=STYLE3>员工调动</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=195');" 
 width="33%"><SPAN class=STYLE3>岗位编制</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=197');" 
 width="33%"><SPAN class=STYLE3>离职备案</SPAN></TD></TR>
 <TR>
 <TD height=30> </TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=199');" 
 width="33%"><SPAN class=STYLE3>培训申请</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=158');" 
 width="33%"><SPAN class=STYLE3>招聘备案</SPAN></TD>
 <TD width="33%" align=center> </TD></TR></TBODY></TABLE>
 <TABLE border=0 width="100%">
 <TBODY>
 <TR>
 <TD height=25 width=2> </TD>
 <TD vAlign=bottom width=209 align=left><B class=sam_tops_button onMouseOver="show()" onMouseOut="hide()">辅助办公</B></TD></TR></TBODY></TABLE>
 <DIV style="DISPLAY: none;  margin-top:-3px;" id=sam_tops class=sam_tops_a onMouseOver="show()" onMouseOut="hide()">
 <TABLE border=0 width="95%">
 <TBODY>
 <TR>
 <TD height=30> </TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=124');" 
 width="33%"><SPAN class=STYLE3>业务日报</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=71');" 
 width="33%"><SPAN class=STYLE3>加班申请</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=141');" 
 width="33%"><SPAN class=STYLE3>名片印制</SPAN></TD></TR>
 <TR>
 <TD height=30> </TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=34');" 
 width="33%"><SPAN class=STYLE3>内部交流</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=129');" 
 width="33%"><SPAN class=STYLE3>督办联系</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=27');" 
 width="33%"><SPAN class=STYLE3>工作报告</SPAN></TD></TR>
 <TR>
 <TD height=30> </TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=69');" 
 width="33%"><SPAN class=STYLE3>请假外出</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=152');" 
 width="33%"><SPAN class=STYLE3>快递审批</SPAN></TD>
 <TD style="CURSOR: hand" onmouseover=javascript:Mover(this); 
 onmouseout=javascript:Mout(this); onmousedown=javascript:Mdown(this); 
 onclick="javascript:HrefLink('0','FlowFrame.jsp?action=0&flowInid=154');" 
 width="33%"><SPAN class=STYLE3>资料领取</SPAN></TD></TR></TBODY></TABLE></DIV>
 </TD></TR>
 </TABLE>
</BODY>
</HTML>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS实现鼠标滑过折叠与展开菜单效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js根据手机客户端浏览器类型，判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
javascript日期处理函数，性能优化批处理
Sep 06 #Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 #Javascript
svg(1) Sentry(1) 滚动条(1) win7(2) 鸿蒙(2) 声卡驱动(1) Sunmao(1) 输入法(2) 蓝屏(1) sout(1)
You might like
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php事务处理实例详解
2014/07/11 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
家用个人磨皮机：Trophy Skin
2017/03/30 全球购物
美国山地自行车、露营、户外装备和服装购物网站：Aventuron
2018/05/05 全球购物
澳大利亚最受欢迎的超级商场每日优惠：Catch
2020/11/17 全球购物
《大自然的语言》教学反思
2014/04/08 职场文书
社团活动总结报告
2014/06/27 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
奔腾年代观后感
2015/06/09 职场文书
毕业赠语大全
2015/06/23 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
mysql联合索引的使用规则
2021/06/23 MySQL
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers