JS는 접기 및 확장 메뉴 효과 code_javascript 기술 위로 마우스 슬라이딩을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS는 접기 및 확장 메뉴 효과 code_javascript 기술 위로 마우스 슬라이딩을 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

js 확장하다 겹 메뉴 마우스 오버

이 글의 예제에서는 메뉴 위로 마우스를 이동할 때 메뉴가 접히고 펼쳐지는 효과를 구현하는 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="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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;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&#63;action=0&flowInid=154');" 
 width="33%"><SPAN class=STYLE3>资料领取</SPAN></TD></TR></TBODY></TABLE></DIV>
 </TD></TR>
 </TABLE>
</BODY>
</HTML>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7615

Cakephp 튜토리얼

1387

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

136

Related knowledge

구글 픽셀 9 프로 폴드 휴대폰 케이스 노출 : 6.4인치 외부 스크린, 8.02인치 내부 스크린 Jun 25, 2024 pm 02:35 PM

25일 뉴스에 따르면, 출처 ytechb는 어제(24일) 블로그 게시물을 게재해 구글 픽셀9 프로 폴드 휴대폰 케이스 렌더링을 공유하며, 이 병풍의 뒷면 디자인을 다시 한 번 보여줬다. 이전 소식에 따르면, 구글은 올해 10월 픽셀 9 시리즈 휴대폰을 출시할 예정이며, 픽셀 9 시리즈 휴대폰 3종 외에 픽셀 폴드도 픽셀 9 시리즈에 포함돼 공식 명칭은 픽셀 9이 될 예정이다. 프로 폴드. 이번에 노출된 휴대폰 케이스는 액세서리 제조사 토로(Torro)의 영국, 미국 온라인 매장에 제품 휴대폰 케이스를 게재하고 휴대폰의 디자인과 디스플레이 사이즈를 공개한 바 있다. 이 페이지에는 다수의 Pixel 9 Pro Fold 휴대전화 케이스 렌더링이 표시됩니다.

삼성 1만위안 폴더블폰 W25 공개 : 500만 화소 전면 언더스크린 카메라, 더 얇아진 본체 Aug 23, 2024 pm 12:43 PM

8월 23일 뉴스에 따르면, 삼성전자는 9월 말 공개될 예정인 새로운 폴더블폰 W25를 출시할 예정이다. 이에 맞춰 언더스크린 전면 카메라와 본체 두께도 개선될 예정이다. 보도에 따르면, 코드명 Q6A인 삼성 W25에는 갤럭시 Z 폴드 시리즈의 400만 화소 카메라보다 향상된 500만 화소 언더 스크린 카메라가 장착될 예정입니다. 또한 W25의 외부 화면 전면 카메라와 초광각 카메라는 각각 1,000만 화소와 1,200만 화소가 될 것으로 예상된다. 디자인적으로 보면 W25는 접힌 상태에서 두께가 약 10mm로 표준형 갤럭시Z폴드6보다 약 2mm 얇아졌다. 화면 측면에서는 W25가 6.5인치 외부 화면과 8인치 내부 화면을 갖고 있는 반면, 갤럭시Z폴드6는 6.3인치 외부 화면과 8인치 내부 화면을 갖고 있다.

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요

삼성 갤럭시 Z 플립 6 모델 최초 공개: 베젤이 더 좁아지고 주름이 여전히 존재함 Jun 22, 2024 am 03:28 AM

21일 뉴스에 따르면 최근 외신들은 삼성 갤럭시Z플립6의 모델 사진을 인터넷에 공개했다. 사진에 따르면 삼성 갤럭시 Z 플립 6의 테두리가 더욱 좁아져 접힌 상태에서 휴대폰의 너비가 줄어들 수 있음을 의미하며, 더욱 편안한 그립감과 휴대성을 제공한다는 것을 알 수 있습니다. . 더욱이 갤럭시 ZFlip6 모델은 이전 세대 ZFlip5에 비해 좀 더 사각형이 되었고, 후면 카메라 모듈도 새로운 카메라 센서를 채용할 것으로 예상됩니다. 다만, 전면에서 보면 여전히 휴대폰의 주름이 비교적 뚜렷하지만, 유출된 모델이 모델폰이라는 점을 고려하면 실제 휴대폰과 다소 차이가 있을 수 있으므로 참고용으로만 사용하시기 바랍니다. 성능 구성으로 보면 갤럭시는

접이식 스크린 휴대폰의 가장 큰 단점: 핵심 응용 시나리오가 없음 Mar 16, 2024 am 09:04 AM

오늘 우리가 논의하는 것은 특정 제품이 어떤 것인지가 아니라, '접이식 화면' 자체의 주제로 돌아가서 접는식 화면 휴대폰의 '합리성'에 대해 탐구하는 것입니다. 먼저, 폴더블폰 시장실적을 살펴보자. IDC 최신 자료에 따르면, 2023년 중국 폴더블폰 시장은 전년 대비 114.5% 증가한 약 700만7000대를 출하할 것으로 예상된다. 그중 중국 폴더블 스크린 휴대폰 시장은 2023년 4분기 약 277만1000대를 출하해 전년 동기 대비 149.6% 증가한 것으로 나타났다. 데이터도 좋아 보이고 성장세도 매우 강하다. 하지만 2023년 중국 시장의 스마트폰 출하량 약 2억 7천만 대에 비하면 이 데이터는 정말 부족하다. 일반적으로

IDC는 2024년 전 세계 스마트폰 출하량이 12억 대에 달할 것으로 추산했다. 폴더블 화면은 2,500만 대로 전년 대비 37% 증가한 수치다. Feb 24, 2024 pm 02:20 PM

24일 뉴스에 따르면 IDC는 최근 시장조사 보고서를 발표해 2024년 전 세계 스마트폰 출하량이 전년 동기 대비 2.8% 증가한 12억대에 달한 뒤 2028년까지 낮은 한 자릿수 성장률을 유지할 것으로 전망했다. . IDC는 2024년 전체 출하량은 여전히 팬데믹 이전 수준을 밑돌 것으로 보고 있지만 글로벌 스마트폰 시장은 바닥을 치고 회복세를 보이기 시작했다. IDC는 전반적인 시장 회복을 이끄는 두 가지 주요 요인은 장비 갱신 주기와 신흥 시장의 수요 증가라고 믿습니다. IDC는 2024년 폴더블폰 출하량이 전년 대비 37% 증가한 2,500만 대에 이를 것으로 추정하고 있다. 스마트폰 토론이 촉발되다

See all articles

JS는 접기 및 확장 메뉴 효과 code_javascript 기술 위로 마우스 슬라이딩을 구현합니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제