JS实现鼠标滑过折叠与展开菜单效果代码_javascript技巧
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码。分享给大家供大家参考。具体如下:
这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果。本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单。
运行效果截图如下:
在线演示地址如下:
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="/static/imghw/default1.png" data-src="images/newTitle.jpg" class="lazy" 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程序设计有所帮助。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

6月25日消息,消息源ytechb昨日(6月24日)发布博文,分享了谷歌Pixel9ProFold手机壳渲染图,再次展示了这款折叠屏背面的设计。此前消息,谷歌将于今年10月发布Pixel9系列手机,除了Pixel9系列三款手机之外,PixelFold也纳入到Pixel9系列中,正式上架后名称为Pixel9ProFold。本次曝光的手机壳来自配件厂商Torro,该公司的英国和美国在线商店已经列出了该产品手机壳,并披露了这款手机的设计和显示屏尺寸。页面中展示了大量Pixel9ProFold手机壳渲染

我们今天探讨的并非某一款产品到底怎么样,而是回归到“折叠屏”话题本身上来,探究一下折叠屏手机的“合理性”。首先还是看一看折叠屏手机的市场表现,根据IDC最新数据报告显示,2023年全年中国折叠屏手机市场出货量约700.7万台,同比增长114.5%。其中,2023年第四季度中国折叠屏手机市场出货量约277.1万台,同比增长149.6%,数据看上去确实还不错,增长也很强势。不过与2023年中国市场智能手机2.7亿左右出货量相比,这个数据就着实不太够看了。总的来说

8月23日消息,三星即将推出新款折叠手机W25,预计9月底亮相,将在屏下前摄、机身厚度上作出相应的提升。据报道,三星W25代号为Q6A,将配备500万像素屏下摄像头,相较于GalaxyZFold系列的400万像素摄像头有所提升。此外,W25的外屏前置摄像头和超广角摄像头预计分别为1000万和1200万像素。在设计上,W25折叠状态下的厚度约为10毫米,比标准版GalaxyZFold6薄约2毫米。屏幕方面,W25的外屏为6.5英寸,内屏为8英寸,而GalaxyZFold6的外屏为6.3英寸,内屏为

在word编辑文本内容后,需要查看检查所编辑的内容。如果内容较多时,查阅比较不方便,如何解决这个问题呢,这时就需要word折叠的方法。下面就让小编跟各位小伙伴们分享下方法教程吧!首先,打开电脑上的Word文档,输入所需内容并选中,然后单击菜单栏中的“开始”选项,接着选择一个样式应用到刚才选中的文字段落中。你可以参考下方图片中标有红色圈的部分。2.然后这样,选中的文字段落就变换了样式,多了一个小箭头,如下方图片红色圈中部分所示:3.点击小箭头就能自由展开或者折叠先前所选的文字段落,或者直接右键,从

2月24日消息,IDC近日发布市场研究报告,预估2024年全球智能手机出货量将达到12亿部,同比增长2.8%,随后到2028年将保持较低的个位数增长。IDC认为2024年总体出货量仍低于大流行前的水平,但全球智能手机市场已经走出低谷,开始呈现复苏上扬趋势。IDC认为推动整体市场复苏的两个关键因素,其一是设备更新周期,其二新兴市场需求的增长。另外还有两个主要驱动力,IDC预估折叠屏手机2024年出货量将达到2500万部,同比增长37%;另外就是人工智能(AI)已迅速成为智能手机讨论的一部分,引发了

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
