js实现的早期滑动门菜单效果代码

本文实例讲述了js实现的早期滑动门菜单效果代码。分享给大家供大家参考。具体如下：
这里介绍的是传说中的早期滑动门菜单Demo代码，测试时请把鼠标放到左侧相应的导航栏目上，放在左侧菜单上的时候，你就发现玄机了，右侧的内容会跟着变化，JS与HTML结合实现的，比较传统的导航效果。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/
具体代码如下：

<HTML><HEAD><TITLE>文字导航效果--滑动门</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><CENTER><TABLE borderColor=#993399 border=5 borderlight="green"> <TBODY> <TR> <TD align=middle><SCRIPT language=JavaScript><！-- Beginvar linktext=new Array（）linktext[0]="<table border="0" width="210" height="185" bgcolor="#EFEFEF" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最常用的校友录站点</td></tr></table>"linktext[1]="<table border="0" width="210" height="185" bgcolor="#D1FD80" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的游戏网站-第九城市</td></tr></table>"linktext[2]="<table border="0" width="210" height="185" bgcolor="#FDB9FD" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的新闻发布类站点-新浪网</td></tr></table>"linktext[3]="<table border="0" width="210" height="185" bgcolor="#FFFF5E" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的综合性娱乐站点--网易</td></tr></table>"linktext[4]="<table border="0" width="210" height="185" bgcolor="#C2D7FC" cellpadding="8" cellspacing="0"><tr><td valign="top">最大的搜索引擎站点...百度</td></tr></table>"var ns6=document.getElementById&&！document.allvar ie=document.allfunction show_text（thetext, whichdiv）{if （ie） eval（"document.all."+whichdiv）.innerHTML=linktext[thetext]else if （ns6） document.getElementById（whichdiv）.innerHTML=linktext[thetext] }function reset（whichdiv）{if （ie） eval（"document.all."+whichdiv）.innerHTML="<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="0" cellspacing="8"><tr><td valign="top"><font face="arial" size="4"><b>请把鼠标放到左侧相应的导航栏目上<p>有所变化</b></font></td></tr></table>"else if （ns6） document.getElementById（whichdiv）.innerHTML="<table border="0" width="210" height="185" bgcolor="#F88530" cellpadding="8" cellspacing="0"><tr><td valign="top"><font face="arial" size="4"><b>请把鼠标放到左侧相应的导航栏目上<p>看到变化效果了吗？</b></font></td></tr></table>"}// End --></SCRIPT><TABLE cellSpacing=0 cellPadding=3 width=370 align=center bgColor=black border=0><TBODY><TR> <TD> <TABLE cellSpacing=0 cellPadding=0 width=370 background="" border=0><TBODY><TR><TD> <TABLE cellSpacing=0 cellPadding=8 width=160 bgColor=#f88530border=0> <TBODY> <TR><TD onMouseOver="bgColor="#EFEFEF"; show_text（0,"div1"）" style="CURSOR: hand" onclick="window.location="http://www.chinaren.com"" onmouseout="bgColor="#F88530"; reset（"div1"）">中国人</TD></TR> <TR><TD onMouseOver="bgColor="#D1FD80"; show_text（1,"div1"）" style="CURSOR: hand" onclick="window.location="http://www.the9.com"" onmouseout="bgColor="#F88530"; reset（"div1"）">第九城市</TD></TR> <TR><TD onMouseOver="bgColor="#FDB9FD"; show_text（2,"div1"）" style="CURSOR: hand" onclick="window.location="http://www.sina.com.cn"" onmouseout="bgColor="#F88530"; reset（"div1"）">新浪网</TD></TR> <TR><TD onMouseOver="bgColor="#FFFF5E"; show_text（3,"div1"）" style="CURSOR: hand" onclick="window.location="http://www.163.com"" onmouseout="bgColor="#F88530"; reset（"div1"）">网易</TD></TR> <TR><TD onMouseOver="bgColor="#C2D7FC"; show_text（4,"div1"）" style="CURSOR: hand" onclick="window.location="http://www.baidu.com"" onmouseout="bgColor="#F88530"; reset（"div1"）">百度一下</TD></TR></TBODY></TABLE></TD><TD><SPAN id=div1> <TABLE height=185 cellSpacing=0 cellPadding=8 width=210bgColor=#f88530 border=0> <TBODY> <TR><TD vAlign=top><FONT face=arial size=4><B>请把鼠标放到左侧相应的导航栏目上 <P>有所变化</P></B></FONT></TD></TR></TBODY></TABLE></SPAN></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

希望本文所述对大家的javascript程序设计有所帮助。