Web Front-end
JS Tutorial
JS implements mouse over folding and expanding menu effect code_javascript skills
JS implements mouse over folding and expanding menu effect code_javascript skills
The example in this article describes the JS code that implements the effect of folding and expanding the menu when the mouse slides over it. Share it with everyone for your reference. The details are as follows:
This is an expand menu special effect. It automatically expands when the mouse is moved up, and automatically collapses and hides after being moved away. It uses JS technology and combines CSS to achieve the effect. This folding menu is similar to QQ’s foldable friend list, and many people like this kind of menu.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/
The specific code is as follows:
<!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>
I hope this article will be helpful to everyone’s JavaScript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
Google Pixel 9 Pro Fold phone case exposed: 6.4-inch outer screen, 8.02-inch inner screen
Jun 25, 2024 pm 02:35 PM
According to news on June 25, the source ytechb published a blog post yesterday (June 24), sharing a rendering of the Google Pixel 9 Pro Fold mobile phone case, once again showing the design of the back of this folding screen. According to previous news, Google will release the Pixel 9 series of mobile phones in October this year. In addition to the three phones in the Pixel 9 series, Pixel Fold will also be included in the Pixel 9 series and will be officially named Pixel 9 Pro Fold. The phone case exposed this time comes from accessory manufacturer Torro. The company's UK and US online stores have listed the product phone case and disclosed the design and display size of the phone. The page shows a large number of Pixel 9 Pro Fold phone case renderings
Samsung's 10,000-yuan foldable phone W25 revealed: 5-megapixel under-screen front camera and thinner body
Aug 23, 2024 pm 12:43 PM
According to news on August 23, Samsung is about to launch a new folding mobile phone W25, which is expected to be unveiled at the end of September. It will make corresponding improvements in the under-screen front camera and body thickness. According to reports, Samsung W25, codenamed Q6A, will be equipped with a 5-megapixel under-screen camera, which is an improvement over the 4-megapixel camera of the Galaxy Z Fold series. In addition, the W25’s external-screen front camera and ultra-wide-angle camera are expected to be 10 million and 12 million pixels respectively. In terms of design, the W25 is about 10 mm thick in the folded state, which is about 2 mm thinner than the standard Galaxy Z Fold 6. In terms of screen, the W25 has an external screen of 6.5 inches and an internal screen of 8 inches, while the Galaxy Z Fold6 has an external screen of 6.3 inches and an internal screen of 8 inches.
The biggest shortcoming of foldable screen mobile phones: no core application scenarios
Mar 16, 2024 am 09:04 AM
What we are discussing today is not what a certain product is like, but returning to the topic of "folding screen" itself and exploring the "rationality" of folding screen mobile phones. First, let’s take a look at the market performance of folding screen mobile phones. According to IDC’s latest data report, China’s folding screen mobile phone market will ship approximately 7.007 million units in 2023, a year-on-year increase of 114.5%. Among them, China's foldable screen mobile phone market shipped approximately 2.771 million units in the fourth quarter of 2023, a year-on-year increase of 149.6%. The data does look good, and the growth is also very strong. However, compared with the approximately 270 million smartphone shipments in the Chinese market in 2023, this data is really not enough. In general
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
Samsung Galaxy Z Flip 6 model first revealed: narrower bezels, creases still present
Jun 22, 2024 am 03:28 AM
According to news on June 21, foreign media recently released model photos of Samsung Galaxy Z Flip 6 on the Internet. According to the picture, it can be understood that the borders of Samsung Galaxy Z Flip 6 will be further narrowed, which means that the width of the phone may be reduced in the folded state, and it will also provide a more comfortable grip and portability. Moreover, compared with the previous generation ZFlip5, the model of Galaxy ZFlip6 is more square and the camera module on the back is more prominent. It is expected to use a new camera sensor. However, from the front, the creases of the phone are still relatively obvious, but considering that the leaked model is a model phone, there may be some differences with the real phone, so it is for reference only. In terms of performance configuration, Galaxy
IDC estimates that global smartphone shipments in 2024 will be 1.2 billion units: 25 million foldable screen units, a year-on-year increase of 37%
Feb 24, 2024 pm 02:20 PM
According to news on February 24, IDC recently released a market research report, predicting that global smartphone shipments will reach 1.2 billion units in 2024, a year-on-year increase of 2.8%, and will then maintain low single-digit growth by 2028. IDC believes that overall shipments in 2024 will still be below pre-pandemic levels, but the global smartphone market has bottomed out and is beginning to show an upward trend in recovery. IDC believes that the two key factors driving the overall market recovery are the equipment refresh cycle and the growth of demand in emerging markets. There are also two main driving forces. IDC estimates that folding screen mobile phone shipments will reach 25 million units in 2024, a year-on-year increase of 37%; the other is that artificial intelligence (AI) has quickly become a part of the discussion on smartphones, triggering
