|
|
可弹出的隐藏层
名称： |
可弹出的隐藏层
|
实例：
|
用鼠标点击左边的箭头看效果
|
| 教程： |
第一步：将下列代码加入<head></head>之间
<SCRIPT language=JavaScript1.2>
var tabShow=1;
//Hide-Show Layer
function hidepoptext() {
if (tabShow == 1) {
document.getElementById("poptextDiv").style.visibility="hidden";
document.getElementById("tabDiv").style.left = 0;
tabShow = 0;
} else{
document.getElementById("poptextDiv").style.visibility = "visible";
document.getElementById("tabDiv").style.left = 223;
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>
第二步，将下列代码紧接着放在<body>语句后面
<DIV id=tabDiv><A href="javascript:hidepoptext();"><IMG alt="" border=0 src="tab.gif" width="15px" height="164px"> </A></DIV>
<DIV id=poptextDiv><p>这就是弹出式菜单。</p>
<p>这里可以改成你喜欢</p>
<p>的文字或者菜单，</p>
<p>用鼠标点击边上的箭头</p>
<p>可以弹出或隐藏该层</p>
<p>赶快下载教程试一试哦：）</p>
</DIV>
|
| 说明： |
其中的"tab.gif"可以替换为你自己的图片
变量tabShow=1或者tabShow=0决定一开始是否显示该层 |
|
