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

前端技术 2023/09/05 JavaScript

本文实例讲述了js实现的早期滑动门菜单效果代码。分享给大家供大家参考。具体如下：

这里介绍的是传说中的早期滑动门菜单Demo代码，测试时请把鼠标放到左侧相应的导航栏目上，放在左侧菜单上的时候，你就发现玄机了，右侧的内容会跟着变化，JS与HTML结合实现的，比较传统的导航效果。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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>
<!-- Begin
var 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.all
var ie=document.all
function 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=#f88530 
     border=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=210 
     bgColor=#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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12809

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案