js实现推拉菜单
<P>js实现推拉菜单,演示:http://www.phpfine.com/tuila.htm<br><br><html><br><head><br><title>推拉菜单</title><br><style><br>a:link { font-size: 10pt; color: blue; } <br>a:hover{ font-size: 12pt;}<br>#D1 {<br>/*定义菜单的形状*/<br> BACKGROUND-COLOR: #FFCCFF;<br> BORDER-BOTTOM: white 2px outset; <br> BORDER-LEFT: white 2px outset; <br> BORDER-RIGHT: white 2px outset;<br> BORDER-TOP: white 2px outset; LEFT: 0px;<br> POSITION: absolute; TOP: 190px; VISIBILITY: hidden;<br> WIDTH: 200px; layer-background-color: lightblue<br>}<br></style></P><P><SCRIPT LANGUAGE="JavaScript"><br><!--</P>
<P>F_in=F_out=in_ID=out_ID=null;<br>function init() //初始化程序<br>{<br> menu=D1.style;<br> menuW=D1.offsetWidth;<br> menu.pixelLeft=menuW*(-1)+20;<br> D1.onmouseover=OnMouOv;<br> D1.onmouseout=OnMouOut;<br> D1.style.visibility="visible";<br>}</P>
<P><br>function OnMouOv() //当鼠标经过时<br>{<br> clearTimeout(F_in);<br> F_out=setTimeout("MenuOut()",10);<br>}</P>
<P>function OnMouOut() //当鼠标移开<br>{<br> clearTimeout(F_out)<br> F_in=setTimeout("MenuIn()",10);<br>}</P>
<P>function MenuIn() //菜单in<br>{<br> hlb1.innerHTML=menu.pixelLeft+":"+(menuW*(-1)+20+10);</P>
<P> clearTimeout(out_ID);<br> if(menu.pixelLeft>(menuW*(-1)+20+10))<br> {<br> menu.pixelLeft+=-4;<br> in_ID=setTimeout("MenuIn()",1);<br> }<br> else if(menu.pixelLeft>(menuW*(-1)+20))<br> {<br> menu.pixelLeft--;<br> in_ID=setTimeout("MenuIn()",1);<br> }<br> <br>}</P>
<P>function MenuOut() //菜单out<br>{<br> hlb.innerHTML=menu.pixelLeft;<br> clearTimeout(in_ID);<br> if(menu.pixelLeft<-10)<br> {<br> menu.pixelLeft+=4;<br> out_ID=setTimeout("MenuOut()",1);<br> }<br> else if(menu.pixelLeft<=0)<br> {<br> menu.pixelLeft++;<br> out_ID=setTimeout("MenuOut()",1);<br> }</P>
<P>}<br>//--><br></SCRIPT><br></head></P>
<P><body onload="init()"></P>
<P>调试:<span id="hlb" style="color:red"></span></P>
<P><span id="hlb1" style="color:green"></span></P>
<P><div id="D1"><br> <table border="0"><br> <tr><br> <td align="middle"><b style="color:red">编程论坛</b></td><br> </tr><br> <tr><br> <td><br> <ul><br> <li><a href="http://www.phpfine.com/aoyun.htm">奥运倒计时</a></li><br> <li><a href="http://www.phpfine.com/daoying.htm">倒影倒计时</a></li><br> <li><a href="http://www.phpfine.com/tuila.htm">推拉菜单</a></li><br> </ul><br> </td><br> </tr><br> <tr><br> <td align="middle"><b style="color:green"><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=1">开发语言<a></b></td><br> </tr><br> <tr><br> <td><br> <ul><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=5">C语言论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=6">VB6论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=7">C++论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=219">JAVA论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=9">Delphi论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=126">汇编论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=179">数据结构与算法</a></li><br> </ul><br> </td><br> </tr><br> <tr><br> <td align="middle"><b style="color:green"><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=2">Web开发 <a></b></td><br> </tr><br> <tr><br> <td><br> <ul><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=10"> ASP论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=218"> Ajax论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=13"> PHP论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=12"> JSP论坛 </a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=180"> Ruby论坛</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=15">Javascript</a></li><br> <li><a href="http://bbs.bc-cn.net/forumdisplay.php?fid=19">网页设计</a></li><br> </ul><br> </td><br> </tr><br> </table><br></div><br></body><br></html></P>
[align=right][color=#000066][此贴子已经被作者于2007-8-26 19:25:01编辑过][/color][/align]
<P>我那些只是用来调试用的，没有删除掉，我想让程序运更加明了。</P> 不错！ <P>还是多请高手多指教!</P> 不错，挺好的 谢谢版主鼓励. 在IE中是可以用的，FF中直接就显示出来了。这也是没有办法的事情。<BR><BR>顺便回答一下三楼的问题：<BR>FF是一个浏览器，Firefox火狐浏览器。 *** 作者被禁止或删除 内容自动屏蔽 ***
页:
[1]