<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="Javascript,Javascript,Javascript,Javascript,Javascript">
<!-- 以下代码是设定此页的超链接样式 -->
<style type="text/css"><!-- A:link {text-decoration: none; color:#000000}
A:visited {text-decoration: none; color: #000000}
A:active {text-decoration: none; color: #FF0000}
A:hover {text-decoration: underline; color: FF0000}
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}
-->
</style>
<SCRIPT language=JavaScript1.2>
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
function init() {
if (n) tab = document.tabDiv
if (n) poptext = document.poptextDiv
if (ie) tab = tabDiv.style
if (ie) poptext = poptextDiv.style
}
var tabShow=1;
//Hide-Show Layer
function hidepoptext() {
if (tabShow == 1) {
if (n) {
tab.visibility = "hide";
tab.left = 0;
tab.visibility = "show";
poptext.visibility = "hide";
tabShow = 0;
return;
}
if (ie) {
tab.visibility = "hidden";
tab.left = 0;
tab.visibility = "visible";
poptext.visibility = "hidden";
tabShow = 0;
return;
}
}
if (tabShow == 0) {
if (n) {
tab.visibility = "hide";
tab.left = 223;
tab.visibility = "show";
poptext.visibility = "show";
tabShow = 1;
}
if (ie) {
tab.visibility = "hidden";
tab.left = 223;
tab.visibility = "visible";
poptext.visibility = "visible";
tabShow = 1;
}
}
}
</SCRIPT>
<STYLE>#tabdiv {
LEFT: 223px; POSITION: absolute; TOP: 20px; Z-INDEX: 2
}
#poptextdiv {
BACKGROUND-COLOR: #eeeeff; BORDER-BOTTOM-COLOR: #000099; BORDER-BOTTOM-WIDTH: 2px; BORDER-LEFT-COLOR: #000099; BORDER
-LEFT-WIDTH: 2px; BORDER-RIGHT-COLOR: #000099; BORDER-RIGHT-WIDTH: 2px; BORDER-TOP-COLOR: #000099; BORDER-TOP-WIDTH: 2px;
COLOR: black; LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 10px; POSITION: absolute;
TOP: 10px; WIDTH: 223px; Z-INDEX: 1
}
#maintext {
LEFT: 240px; POSITION: absolute; TOP: 10px; WIDTH: 470px
}
</STYLE>
<title>可弹出的隐藏层</title>
</head>
<body bgcolor="#FFFFFF" onload=init()>
<DIV id=tabDiv><A href="javascript:hidepoptext();"><IMG alt="" border=0 src="tab.gif" width="15" height="164"> </A></DIV>
<DIV id=poptextDiv><p>这就是弹出式菜单。</p>
<p>这里可以改成你喜欢</p>
<p>的文字或者菜单，</p>
<p>用鼠标点击边上的箭头</p>
<p>可以弹出或隐藏该层</p>
<p>赶快下载教程试一试哦：）</p>
</DIV>
<table border="1" width="100%" cellpadding="0">
<tr>
<td width="12%" valign="top" align="center"><p align="right">名称：</td>
<td width="67%" valign="top">
<p align="center">可弹出的隐藏层</p>
</td>
</tr>
<tr>
<td width="12%" valign="top" align="center"><p align="right">实例：<br>
</p>
<p align="right"> </p>
<p align="right"> </p>
<p align="right"> </p>
<p align="right"> </td>
<td width="67%" valign="top">
<p align="center">用鼠标点击左边的箭头看效果</p>
</td>
</tr>
<tr>
<td width="12%" valign="top" align="right">教程：</td>
<td width="67%" valign="top">第一步：将下列代码加入<head></head>之间
<p><SCRIPT language=JavaScript1.2><br>
<br>
if (document.layers) {n=1;ie=0}<br>
if (document.all) {n=0;ie=1}<br>
<br>
function init() {<br>
if (n) tab = document.tabDiv<br>
if (n) poptext = document.poptextDiv<br>
if (ie) tab = tabDiv.style<br>
if (ie) poptext = poptextDiv.style<br>
}<br>
<br>
var tabShow=1;<br>
<br>
//Hide-Show Layer<br>
function hidepoptext() {<br>
<br>
if (tabShow == 1) {<br>
if (n) {<br>
tab.visibility = "hide";<br>
tab.left = 0;<br>
tab.visibility = "show";<br>
poptext.visibility = "hide";<br>
tabShow = 0;<br>
return;<br>
}<br>
if (ie) {<br>
tab.visibility = "hidden";<br>
tab.left = 0;<br>
tab.visibility = "visible";<br>
poptext.visibility = "hidden";<br>
tabShow = 0;<br>
return;<br>
}<br>
}<br>
<br>
if (tabShow == 0) {<br>
if (n) {<br>
tab.visibility = "hide";<br>
tab.left = 223;<br>
tab.visibility = "show";<br>
poptext.visibility = "show";<br>
tabShow = 1;<br>
}<br>
if (ie) {<br>
tab.visibility = "hidden";<br>
tab.left = 223;<br>
tab.visibility = "visible";<br>
poptext.visibility = "visible";<br>
tabShow = 1;<br>
}<br>
}<br>
}<br>
<br>
</SCRIPT><br>
<br>
<STYLE>#tabdiv {<br>
LEFT: 223px; POSITION: absolute; TOP: 20px; Z-INDEX: 2<br>
}<br>
#poptextdiv {<br>
BACKGROUND-COLOR: #eeeeff; BORDER-BOTTOM-COLOR: #000099; BORDER-BOTTOM-WIDTH: 2px; BORDER-LEFT-COLOR: #000099; BORDER
-LEFT-WIDTH: 2px; BORDER-RIGHT-COLOR: #000099; BORDER-RIGHT-WIDTH: 2px; BORDER-TOP-COLOR: #000099; BORDER-TOP-WIDTH: 2px;
COLOR: black; LEFT: 0px; PADDING-BOTTOM: 10px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 10px; POSITION: absolute;
TOP: 10px; WIDTH: 223px; Z-INDEX: 1<br>
}<br>
#maintext {<br>
LEFT: 240px; POSITION: absolute; TOP: 10px; WIDTH: 470px<br>
}<br>
</STYLE></p>
<p>第二步：修改body语句为：</p>
<p><body onload=init()></p>
<p>第三步，将下列代码紧接着放在<body>语句后面</p>
<p><DIV id=tabDiv><A href="javascript:hidepoptext();"><IMG alt="" border=0 src="tab.gif" width="15"
height="164"> </A></DIV><br>
<DIV id=poptextDiv><p>这就是弹出式菜单。</p><br>
<p>这里可以改成你喜欢</p><br>
<p>的文字或者菜单，</p><br>
<p>用鼠标点击边上的箭头</p><br>
<p>可以弹出或隐藏该层</p><br>
<p>赶快下载教程试一试哦：）</p><br>
</DIV></p>
<p> </p>
</td>
</tr>
<tr>
<td width="12%" valign="top" align="right">说明：</td>
<td width="67%" valign="top">这个脚本适合IE和NC4.0以上版本。<br>
其中的"tab.gif"可以替换为你自己的图片<br>
变量tabShow=1或者tabShow=0决定一开始是否显示该层</td>
</tr>
</table><p> </p>
</body>
</html>
IE8以下适用 |
收藏本站