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

📄 7-1-left1.html

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

<html>
<head>
	<title>left1</title>
</head>
<style>
body {font-size:9pt;font-family:'宋体'}
table {font-size:9pt;font-family:'宋体'}
td {align:left;valign:middle;height:16px}
img {vertical-align:middle}
a {text-decoration:none;color:black}
</style>
<script language="JavaScript">
/*--------------------------------\
|  Authored by CZH;czh44@sohu.com |
\--------------------------------*/
function showSub(theIndex)
{
var theBelowLay,theSubLay,theBelowSub;
var theCurLay="lay"+theIndex;
var theCurLayImg=theCurLay+"Img1";
var theImgSrc=document.images[theCurLayImg].src;
	if(theImgSrc.indexOf("add.gif")>0)
	{
	document.images[theCurLayImg].src="jian.gif";
	theSubLay="lay"+theIndex+"Sub";
	theBelowLay="lay"+(theIndex+1);
	document.getElementById(theSubLay).style.top=document.getElementById(theBelowLay).style.top;
	document.getElementById(theSubLay).style.visibility='visible';
		for(var i=1;i<8-theIndex;i++)
		{
		//注意,在应用循环时,层theLay2Sub,theLay3Sub....theLay8Sub必须都存在,否则程序出错
		//每个层都必须指定top属性,否则程序将出错
		theBelowLay="lay"+(theIndex+i);
		document.getElementById(theBelowLay).style.top=parseInt(document.getElementById(theBelowLay).style.top)+document.getElementById(theSubLay).clientHeight;
		theBelowSub=theBelowLay+"Sub";
		document.getElementById(theBelowSub).style.top=parseInt(document.getElementById(theBelowSub).style.top)+document.getElementById(theSubLay).clientHeight;
		}
		document.getElementById('lay8').style.top=parseInt(document.getElementById('lay8').style.top)+document.getElementById(theSubLay).clientHeight;
	}
	else if(theImgSrc.indexOf("jian.gif")>0)	
	{
	document.images[theCurLayImg].src="add.gif";
	theSubLay="lay"+theIndex+"Sub";
	theBelowLay="lay"+(theIndex+1);
	document.getElementById(theSubLay).style.visibility='hidden';
		for(var i=1;i<8-theIndex;i++)
		{
		theBelowLay="lay"+(theIndex+i);
		document.getElementById(theBelowLay).style.top=parseInt(document.getElementById(theBelowLay).style.top)-document.getElementById(theSubLay).clientHeight;
		theBelowSub=theBelowLay+"Sub";
		document.getElementById(theBelowSub).style.top=parseInt(document.getElementById(theBelowSub).style.top)-document.getElementById(theSubLay).clientHeight;
		}
		document.getElementById('lay8').style.top=parseInt(document.getElementById('lay8').style.top)-document.getElementById(theSubLay).clientHeight;

	}

}
</script>
<body>
<div id='parentLay'>
<div id='lay0' style="position:absolute;top:24px">
<table cellspacing=0 cellpadding=0>
<tr>
<td width=16 height=16><img src="top.gif"></td><td>&nbsp;所有软件</td>
</tr>
</table>
</div>
<!--lay1 begin-->
<div id='lay1' style="position:absolute;top:42px;visibility:visible">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay1Img1" src="add.gif"></td><td><img src="fold_1.gif"></td><td>&nbsp;<a href="JavaScript:showSub(1)">常用工具</a></td>
</tr>
</table>
</div>
<!--lay1 end-->
<!--lay1_sub begin-->
<div id='lay1Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_11.gif'></td><td>&nbsp;<a href="1001.html" target="right">输入法</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="1002.html" target="right">电子词典</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="1003.html" target="right">杀毒软件</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="1004.html" target="right">压缩解压</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="1005.html" target="right">电子阅读</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_8.gif'></td><td>&nbsp;<a href="1006.html" target="right">编辑软件</a></td>
</tr>
</table>
</div>
<!--lay1_sub end-->
<!--lay2 begin-->
<div id='lay2' style="position:absolute;top:64px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay2Img1" src="add.gif"></td><td><img src="fold_2.gif"></td><td>&nbsp;<a href="JavaScript:showSub(2)">系统工具</a></td>
</tr>
</table>
</div>
<!--lay2 end-->
<div id='lay2Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="2001.html" target="right">操作系统</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="2002.html" target="right">系统维护</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="2003.html" target="right">系统测试</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="2004.html" target="right">系统补丁</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="2005.html" target="right">磁盘工具</a></td>
</tr>
</table>
</div>
<!--lay3 begin-->
<div id='lay3' style="position:absolute;top:86px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay3Img1" src="add.gif"></td><td><img src="fold_3.gif"></td><td>&nbsp;<a href="JavaScript:showSub(3)">媒体工具</a></td>
</tr>
</table>
</div>
<!--lay3_sub begin-->
<div id='lay3Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="3001.html" target="right">图像浏览</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="3002.html" target="right">图形设计</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="3003.html" target="right">图像压缩</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="3004.html" target="right">抓图工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="3005.html" target="right">Icon工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_1.gif'></td><td>&nbsp;<a href="3006.html" target="right">滤镜插件</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_2.gif'></td><td>&nbsp;<a href="3007.html" target="right">音频工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_9.gif'></td><td>&nbsp;<a href="3008.html" target="right">视频工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_8.gif'></td><td>&nbsp;<a href="3009.html" target="right">动画制作</a></td>
</tr>
</table>
</div>
<!--lay3_sub end-->

<!--lay4 begin-->
<div id='lay4' style="position:absolute;top:108px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay4Img1" src="add.gif"></td><td><img src="fold_4.gif"></td><td>&nbsp;<a href="JavaScript:showSub(4)">网络工具</a></td>
</tr>
</table>
</div>
<!--lay4 end-->
<!--lay4_sub begin-->
<div id='lay4Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="4001.html" target="right">网络浏览</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="4002.html" target="right">网络加速</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="4003.html" target="right">网络聊天</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="4004.html" target="right">网络电话</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_13.gif'></td><td>&nbsp;<a href="4005.html" target="right">主页工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="4005.html" target="right">Mail工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_2.gif'></td><td>&nbsp;<a href="4005.html" target="right">FTP工具</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_20.gif'></td><td>&nbsp;<a href="4005.html" target="right">远程登陆</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_14.gif'></td><td>&nbsp;<a href="4005.html" target="right">网络安全</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_1.gif'></td><td>&nbsp;<a href="4005.html" target="right">离线浏览</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_8.gif'></td><td>&nbsp;<a href="4006.html" target="right">下载工具</a></td>
</tr>
</table>
</div>
<!--lay4_sub end-->
<!--lay5 begin-->
<div id='lay5' style="position:absolute;top:130px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay5Img1" src="add.gif"></td><td><img src="fold_5.gif"></td><td>&nbsp;<a href="JavaScript:showSub(5)">驱动程序</a></td>
</tr>
</table>
</div>
<!--lay5 end-->
<!--lay5_sub begin-->
<div id='lay5Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="5001.html" target="right">主板驱动</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="5002.html" target="right">声卡驱动</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="5003.html" target="right">显卡驱动</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="5004.html" target="right">网卡驱动</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="5005.html" target="right">打印机驱动</a></td>
</tr>
</table>
</div>
<!--lay6_sub end-->
<!--lay6 begin-->
<div id='lay6' style="position:absolute;top:152px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay6Img1" src="add.gif"></td><td><img src="fold_6.gif"></td><td>&nbsp;<a href="JavaScript:showSub(6)">编程软件</a></td>
</tr>
</table>
</div>
<!--lay6 end-->
<!--lay6_sub begin-->
<div id='lay6Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="6001.html" target="right">C/C++</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="6002.html" target="right">脚本语言</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="6003.html" target="right">数据库</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_6.gif'></td><td>&nbsp;<a href="6004.html" target="right">Java/linux</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_7.gif'></td><td>&nbsp;<a href="6005.html" target="right">Web语言</a></td>
</tr>
</table>
</div>
<!--lay6_sub end-->
<!--lay7 begin-->
<div id='lay7' style="position:absolute;top:174px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay7Img1" src="add.gif"></td><td><img src="fold_7.gif"></td><td>&nbsp;<a href="JavaScript:showSub(7)">休闲娱乐</a></td>
</tr>
</table>
</div>
<!--lay7 end-->
<!--lay7_sub begin-->
<div id='lay7Sub' style="position:absolute;top:0px;visibility:hidden">
<table cellspacing=0 cellpadding=0>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_3.gif'></td><td>&nbsp;<a href="7001.html" target="right">游戏软件</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line2.gif'></td><td><img src='fold_4.gif'></td><td>&nbsp;<a href="7002.html" target="right">游戏攻关</a></td>
</tr>
<tr>
<td height=16px><img src='line1.gif'></td><td><img src='line3.gif'></td><td><img src='fold_5.gif'></td><td>&nbsp;<a href="7003.html" target="right">媒体播放</a></td>
</tr>
</table>
</div>
<!--lay7_sub end-->

<!--lay8 begin-->
<div id='lay8' style="position:absolute;top:196px">
<table cellspacing=0 cellpadding=0>
<tr>
<td><img id="lay8Img1" src="line3.gif"></td><td><img src="fold_8.gif"></td><td>&nbsp;<a href="8001.html" target="right">其它软件</a></td>
</tr>
</table>
</div>
<!--lay8 end-->
</div>
<!--lay8_sub end-->
<!--lay end-->
</div>
</body>
</html>

⌨️ 快捷键说明

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