JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼
更新時(shí)間：2015年09月06日 15:37:15 作者：企鵝
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素樣式的相關(guān)實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)鼠標(biāo)滑過折疊與展開菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款展開菜單特效，鼠標(biāo)移上的時(shí)候自動(dòng)展開，移走后自動(dòng)折疊隱藏起來(lái)，運(yùn)用了JS技術(shù)，并結(jié)合了CSS共同實(shí)現(xiàn)的效果。本折疊菜單類似QQ可折疊的好友列表一樣，不少人喜歡這種菜單。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/
具體代碼如下：
<!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>員工調(diào)動(dòng)</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>培訓(xùn)申請(qǐng)</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>招聘?jìng)浒?lt;/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>業(yè)務(wù)日?qǐng)?bào)</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>加班申請(qǐng)</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>內(nèi)部交流</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>督辦聯(lián)系</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>工作報(bào)告</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>請(qǐng)假外出</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>資料領(lǐng)取</SPAN></TD></TR></TBODY></TABLE></DIV>
</TD></TR>
</TABLE>
</BODY>
</HTML>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了js異或運(yùn)算符^小技巧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼
本文給大家介紹了使用js查找法實(shí)現(xiàn)當(dāng)前欄目的高亮顯示的代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2007-11-11
做過微信開發(fā)的都知道，在部分android機(jī)型里微信不支持網(wǎng)頁(yè)上傳圖片的，這是由于這些機(jī)型的文件上傳存在內(nèi)存泄漏，會(huì)導(dǎo)致微信閃退，所以微信內(nèi)置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關(guān)注下2015-08-08
今天小編就為大家分享一篇layui加載表格,綁定新增,編輯刪除,查看按鈕事件的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
JavaScript變量作用域及內(nèi)存問題實(shí)例分析
這篇文章主要介紹了JavaScript變量作用域及內(nèi)存問題,結(jié)合實(shí)例形式分析了javascript全局變量、局部變量、塊級(jí)作用域等概念及內(nèi)存優(yōu)化問題相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了小程序5種路由方法使用場(chǎng)景，封裝路由文件和路由方法，提升小程序體驗(yàn)和開發(fā)效率，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2019-05-05
點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
下面小編就為大家?guī)?lái)一篇點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06
D3.js封裝文本實(shí)現(xiàn)自動(dòng)換行和旋轉(zhuǎn)平移等功能
之前小編和大家分享了SVG中如何配合使用text和tspan來(lái)實(shí)現(xiàn)換行的功能，所以這篇文章對(duì)此功能進(jìn)行一下封裝，以后就可以直接用了。有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-10-10
這篇文章主要介紹了javascript繼承機(jī)制,以實(shí)例形式詳細(xì)分析了javascript繼承的原理與基于原型鏈的繼承實(shí)現(xiàn)方法,具有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11