首页
所有分类
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 相关文章推荐
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 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
find(1) csv(4) gevent(1) metaclass(1) 自动化(1) enumerate(1) list(1) zip(1) 进销存(1) pytest(3)
You might like
15种PHP Encoder的比较
2007/03/06 PHP
php在线代理转向代码
2012/05/05 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
jquery实用代码片段集合
2010/08/12 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
vuejs如何配置less
2017/04/25 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
小程序：授权、登录、session_key、unionId的详解
2019/05/15 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python数据类型详解（一）字符串
2016/05/08 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
animation和transition的区别
2020/10/12 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
应届生骨科医生求职信
2013/10/31 职场文书
医药专业推荐信
2013/11/15 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers