js实现推拉菜单,演示:http://www.phpfine.com/tuila.htm
<html>
<head>
<title>推拉菜单</title>
<style>
a:link { font-size: 10pt; color: blue; }
a:hover{ font-size: 12pt;}
#D1 {
/*定义菜单的形状*/
BACKGROUND-COLOR: #FFCCFF;
BORDER-BOTTOM: white 2px outset;
BORDER-LEFT: white 2px outset;
BORDER-RIGHT: white 2px outset;
BORDER-TOP: white 2px outset; LEFT: 0px;
POSITION: absolute; TOP: 190px; VISIBILITY: hidden;
WIDTH: 200px; layer-background-color: lightblue
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
F_in=F_out=in_ID=out_ID=null;
function init() //初始化程序
{
menu=D1.style;
menuW=D1.offsetWidth;
menu.pixelLeft=menuW*(-1)+20;
D1.onmouseover=OnMouOv;
D1.onmouseout=OnMouOut;
D1.style.visibility="visible";
}
function OnMouOv() //当鼠标经过时
{
clearTimeout(F_in);
F_out=setTimeout("MenuOut()",10);
}
function OnMouOut() //当鼠标移开
{
clearTimeout(F_out)
F_in=setTimeout("MenuIn()",10);
}
function MenuIn() //菜单in
{
hlb1.innerHTML=menu.pixelLeft+":"+(menuW*(-1)+20+10);
clearTimeout(out_ID);
if(menu.pixelLeft>(menuW*(-1)+20+10))
{
menu.pixelLeft+=-4;
in_ID=setTimeout("MenuIn()",1);
}
else if(menu.pixelLeft>(menuW*(-1)+20))
{
menu.pixelLeft--;
in_ID=setTimeout("MenuIn()",1);
}
}
function MenuOut() //菜单out
{
hlb.innerHTML=menu.pixelLeft;
clearTimeout(in_ID);
if(menu.pixelLeft<-10)
{
menu.pixelLeft+=4;
out_ID=setTimeout("MenuOut()",1);
}
else if(menu.pixelLeft<=0)
{
menu.pixelLeft++;
out_ID=setTimeout("MenuOut()",1);
}
}
//-->
</SCRIPT>
</head>
<body onload="init()">
调试:<span id="hlb" style="color:red"></span>
<span id="hlb1" style="color:green"></span>
<div id="D1">
<table border="0">
<tr>
<td align="middle"><b style="color:red">编程论坛</b></td>
</tr>
<tr>
<td>
<ul>
<li><a href="http://www.phpfine.com/aoyun.htm">奥运倒计时</a></li>
<li><a href="http://www.phpfine.com/daoying.htm">倒影倒计时</a></li>
<li><a href="http://www.phpfine.com/tuila.htm">推拉菜单</a></li>
</ul>
</td>
</tr>
<tr>
<td align="middle"><b style="color:green"><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=1">开发语言<a></b></td>
</tr>
<tr>
<td>
<ul>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=5">C语言论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=6">VB6论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=7">C++论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=219">JAVA论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=9">Delphi论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=126">汇编论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=179">数据结构与算法</a></li>
</ul>
</td>
</tr>
<tr>
<td align="middle"><b style="color:green"><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=2">Web开发 <a></b></td>
</tr>
<tr>
<td>
<ul>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=10"> ASP论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=218"> Ajax论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=13"> PHP论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=12"> JSP论坛 </a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=180"> Ruby论坛</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=15">Javascript</a></li>
<li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=19">网页设计</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
[此贴子已经被作者于2007-8-26 19:25:01编辑过]
