⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 7-2-top.html

📁 JavaScript经典实例教程代码
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>7-2-top</title>
</head>
<style >
body {font-size:9pt;font-family:'宋体'}
table {font-size:9pt;font-family:'宋体'}
td.con {border-left:1px solid gray;}
a.m{text-decoration:none}
</style>
<script language="JavaScript">
var theShowLayIndex=0;
function showSubMenu(theIndex)
{
var subLay;
	for(i=1;i<5;i++)
	{
	subLay="lay"+i;
	document.getElementById(subLay).style.visibility="hidden";
	}
subLay="lay"+theIndex;
document.getElementById(subLay).style.visibility="visible";
document.getElementById(subLay).style.top=parseInt(document.getElementById("lay0").style.top)+document.getElementById("lay0").clientHeight;
theShowLayIndex=theIndex;
}
function hideSubMenu(theIndex)
{
var subLay="lay"+theIndex;
document.getElementById(subLay).style.visibility="hidden";
}
function hideLay()
{
var theShowLay="lay"+theShowLayIndex;
var theX1=parseInt(document.getElementById(theShowLay).style.left);
var theX2=theX1+document.getElementById(theShowLay).clientWidth;
var theY1=parseInt(document.getElementById("lay0").style.top);
var theY2=theY1+document.getElementById("lay0").clientHeight+document.getElementById(theShowLay).clientHeight;
if(event.clientX<theX1||event.clientX>theX2||event.clientY<theY1||event.clientY>theY2)
{
	for(i=1;i<5;i++)
	{
	subLay="lay"+i;
	document.getElementById(subLay).style.visibility="hidden";
	}
}

}
</script>
<body  onmousemove="hideLay()">
<img src="8-2top.gif">
<br>
<div id="lay0" style="position:absolute;top=90px;">
<table width=100% id="theMenu" cellspacing="0" cellpadding="0" bgcolor="#BEC8F0" style="border-bottom:1px solid silver">
<tr>
<td>
<table>
<tr>
<td width="100px">&nbsp;</td>
<td class="con" id="td1" onmouseover="showSubMenu(1)" >&nbsp;<a href="" class=m>学院概况&nbsp;</a></td>
<td class="con" id="td2" onmouseover="showSubMenu(2)" >&nbsp;<a href="" class=m>学科建设&nbsp;</a></td>
<td class="con" id="td3" onmouseover="showSubMenu(3)" >&nbsp;<a href="" class=m>教师园地&nbsp;</a></td>
<td class="con" id="td4" onmouseover="showSubMenu(4)" >&nbsp;<a href="" class=m>学生园地&nbsp;</a></td>
<td class="con" id="td5">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="position:absolute;top=120px">
<marquee>欢迎光临计算机学院主页!</marquee>
</div>
<div id="lay1" style="position:absolute;top:0px;left:125px;visibility:hidden;z-index:3;background: #eeeeee;line-height:18px">
<a href="xy01.html" onclick="hideSubMenu(1)" target="right">学院简介</a><br>
<a href="xy02.html" onclick="hideSubMenu(1)" target="right">专业分类</a><br>
</div>
<div id="lay2" style="position:absolute;top:0px;left:190px;visibility:hidden;z-index:3;line-height:18px">
<a href="xk01.html" onclick="hideSubMenu(2)" target="right">计算机应用</a><br>
<a href="xk02.html" onclick="hideSubMenu(2)" target="right">计算机通信</a><br>
<a href="xk03.html" onclick="hideSubMenu(2)" target="right">计算机工程</a><br>
<a href="xk04.html" onclick="hideSubMenu(2)" target="right">计算机网络</a><br>
</div>
<div id="lay3" style="position:absolute;top:0px;left:255px;visibility:hidden;z-index:3;line-height:18px">
<a href="js01.html" onclick="hideSubMenu(3)" target="right">教师主页</a><br>
<a href="js02.html" onclick="hideSubMenu(3)" target="right">上传成绩</a><br>
<a href="js03.html" onclick="hideSubMenu(3)" target="right">在线答疑</a><br>
<a href="js04.html" onclick="hideSubMenu(3)" target="right">教学公告</a><br>
</div>
<div id="lay4" style="position:absolute;top:0px;left:320px;visibility:hidden;z-index:3;line-height:18px">
<a href="xs01.html" onclick="hideSubMenu(4)" target="right">学分查询</a><br>
<a href="xs02.html" onclick="hideSubMenu(4)" target="right">成绩查询</a><br>
<a href="xs03.html" onclick="hideSubMenu(4)" target="right">选课</a><br>
<a href="xs04.html" onclick="hideSubMenu(4)" target="right">课表查询</a><br>
</div>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -