Web-Frontend
js-Tutorial
JS implementiert Code_Javascript-Fähigkeiten, indem die Maus über das Falten und Erweitern von Menüeffekten gleitet
JS implementiert Code_Javascript-Fähigkeiten, indem die Maus über das Falten und Erweitern von Menüeffekten gleitet
Das Beispiel in diesem Artikel beschreibt den JS-Code, der den Effekt des Faltens und Erweiterns des Menüs implementiert, wenn die Maus darüber fährt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein Erweiterungsmenüeffekt, der automatisch erweitert wird, wenn die Maus darüber bewegt wird, und automatisch reduziert und ausgeblendet wird, wenn er wegbewegt wird. Er verwendet JS-Technologie und kombiniert CSS, um den Effekt zu erzielen. Dieses Faltmenü ähnelt der faltbaren Freundesliste von QQ und viele Leute mögen diese Art von Menü.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/
Der spezifische Code lautet wie folgt:
<!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>
Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1387
52
Freigelegte Google Pixel 9 Pro Fold-Telefonhülle: 6,4-Zoll-Außenbildschirm, 8,02-Zoll-Innenbildschirm
Jun 25, 2024 pm 02:35 PM
Laut Nachrichten vom 25. Juni veröffentlichte die Quelle ytechb gestern (24. Juni) einen Blogbeitrag, in dem sie ein Rendering der Google Pixel 9 Pro Fold-Handyhülle teilte, in dem noch einmal das Design der Rückseite dieses Faltbildschirms gezeigt wurde. Laut früheren Nachrichten wird Google im Oktober dieses Jahres die Pixel-9-Serie von Mobiltelefonen herausbringen. Zusätzlich zu den drei Telefonen der Pixel-9-Serie wird auch Pixel Fold in die Pixel-9-Serie aufgenommen und offiziell als Pixel 9 bezeichnet Pro Fold. Die diesmal ausgestellte Telefonhülle stammt vom Zubehörhersteller Torro. Die Online-Shops des Unternehmens in Großbritannien und den USA haben die Produkttelefonhülle gelistet und das Design und die Displaygröße des Telefons bekannt gegeben. Die Seite zeigt eine große Anzahl von Renderings von Pixel 9 Pro Fold-Telefonhüllen
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
Samsungs 10.000 Yuan teures faltbares Telefon W25 enthüllte: 5-Megapixel-Unterbildschirm-Frontkamera und dünneres Gehäuse
Aug 23, 2024 pm 12:43 PM
Laut Nachrichten vom 23. August steht Samsung kurz vor der Markteinführung eines neuen Falthandys W25, das voraussichtlich Ende September vorgestellt wird. Es wird entsprechende Verbesserungen bei der Frontkamera unter dem Bildschirm und der Gehäusedicke mit sich bringen. Berichten zufolge wird das Samsung W25 mit dem Codenamen Q6A mit einer 5-Megapixel-Unterbildschirmkamera ausgestattet sein, was eine Verbesserung gegenüber der 4-Megapixel-Kamera der Galaxy Z Fold-Serie darstellt. Darüber hinaus werden die Frontkamera mit externem Bildschirm und die Ultraweitwinkelkamera des W25 voraussichtlich 10 bzw. 12 Millionen Pixel groß sein. Vom Design her ist das W25 im zusammengeklappten Zustand etwa 10 mm dick und damit etwa 2 mm dünner als das Standard-Galaxy Z Fold 6. In Bezug auf den Bildschirm verfügt das W25 über einen externen Bildschirm von 6,5 Zoll und einen internen Bildschirm von 8 Zoll, während das Galaxy Z Fold6 über einen externen Bildschirm von 6,3 Zoll und einen internen Bildschirm von 8 Zoll verfügt.
So erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS
Dec 17, 2023 am 08:08 AM
So verwenden Sie PHP und JS zum Erstellen eines Aktienkerzendiagramms. Ein Aktienkerzendiagramm ist eine gängige technische Analysegrafik auf dem Aktienmarkt. Es hilft Anlegern, Aktien intuitiver zu verstehen, indem es Daten wie den Eröffnungskurs, den Schlusskurs, den Höchstkurs usw niedrigster Preis der Aktie. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie Aktienkerzendiagramme mit PHP und JS erstellen. 1. Vorbereitung Bevor wir beginnen, müssen wir die folgende Umgebung vorbereiten: 1. Ein Server, auf dem PHP 2. Ein Browser, der HTML5 und Canvas 3 unterstützt
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS
Dec 17, 2023 pm 06:55 PM
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs
Das Samsung Galaxy Z Flip 6-Modell wurde erstmals enthüllt: schmalere Ränder, Falten sind immer noch vorhanden
Jun 22, 2024 am 03:28 AM
Laut Nachrichten vom 21. Juni haben ausländische Medien kürzlich Modellfotos des Samsung Galaxy Z Flip 6 im Internet veröffentlicht. Aus dem Bild geht hervor, dass die Ränder des Samsung Galaxy Z Flip 6 weiter verengt werden, was bedeutet, dass die Breite des Telefons im zusammengeklappten Zustand verringert werden kann und es außerdem für einen bequemeren Halt und eine bessere Tragbarkeit sorgt . Darüber hinaus ist das Modell des Galaxy ZFlip6 im Vergleich zur Vorgängergeneration ZFlip5 quadratischer und das Kameramodul auf der Rückseite wird voraussichtlich einen neuen Kamerasensor verwenden. Von vorne betrachtet sind die Falten des Telefons jedoch immer noch relativ offensichtlich. Wenn man jedoch bedenkt, dass es sich bei dem durchgesickerten Modell um ein Modelltelefon handelt, kann es einige Unterschiede zum echten Telefon geben, sodass es nur als Referenz dient. Was die Leistungskonfiguration angeht, Galaxy
Das größte Manko von Faltdisplay-Handys: keine Kernanwendungsszenarien
Mar 16, 2024 am 09:04 AM
Was wir heute besprechen, ist nicht, wie ein bestimmtes Produkt aussieht, sondern wir kehren zum Thema „Faltbildschirm“ selbst zurück und untersuchen die „Rationalität“ von Mobiltelefonen mit Faltbildschirm. Werfen wir zunächst einen Blick auf die Marktleistung von Mobiltelefonen mit Faltbildschirm. Laut dem neuesten Datenbericht von IDC wird der Markt für Mobiltelefone mit Faltbildschirm im Jahr 2023 etwa 7,007 Millionen Einheiten ausliefern, was einem Anstieg von 114,5 % gegenüber dem Vorjahr entspricht. Unter anderem wurden auf dem chinesischen Markt für Mobiltelefone mit faltbarem Bildschirm im vierten Quartal 2023 etwa 2,771 Millionen Einheiten ausgeliefert, was einem Anstieg von 149,6 % gegenüber dem Vorjahr entspricht. Die Daten sehen gut aus, und das Wachstum ist ebenfalls sehr stark. Verglichen mit den rund 270 Millionen Smartphone-Lieferungen auf dem chinesischen Markt im Jahr 2023 reichen diese Daten jedoch wirklich nicht aus. Allgemein
IDC schätzt, dass die weltweiten Smartphone-Lieferungen im Jahr 2024 1,2 Milliarden Einheiten betragen werden: 25 Millionen faltbare Bildschirmeinheiten, ein Anstieg von 37 % gegenüber dem Vorjahr.
Feb 24, 2024 pm 02:20 PM
Laut Nachrichten vom 24. Februar hat IDC kürzlich einen Marktforschungsbericht veröffentlicht, in dem prognostiziert wird, dass die weltweiten Smartphone-Lieferungen im Jahr 2024 1,2 Milliarden Einheiten erreichen werden, was einem Anstieg von 2,8 % gegenüber dem Vorjahr entspricht, und bis 2028 ein niedriges einstelliges Wachstum beibehalten wird . IDC geht davon aus, dass die Gesamtlieferungen im Jahr 2024 immer noch unter dem Niveau vor der Pandemie liegen werden, der globale Smartphone-Markt hat jedoch die Talsohle durchschritten und beginnt, einen Aufwärtstrend der Erholung zu zeigen. IDC ist davon überzeugt, dass die beiden Schlüsselfaktoren für die allgemeine Markterholung der Zyklus der Geräteerneuerung und das Nachfragewachstum in den Schwellenmärkten sind. Es gibt auch zwei Hauptantriebskräfte, die davon ausgehen, dass die Auslieferungen von Mobiltelefonen mit Faltbildschirmen im Jahr 2024 25 Millionen erreichen werden, was einem Anstieg von 37 % gegenüber dem Vorjahr entspricht Die Diskussion auf Smartphones löst aus
