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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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 bgcolor="#EFEFEF" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最常用的校友录站点</td></tr></table>' linktext[1]='<table bgcolor="#D1FD80" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的游戏网站-第九城市</td></tr></table>' linktext[2]='<table bgcolor="#FDB9FD" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的新闻发布类站点-新浪网</td></tr></table>' linktext[3]='<table bgcolor="#FFFF5E" cellpadding="8" cellspacing="0"><tr><td valign="top">国内最大的综合性娱乐站点--网易</td></tr></table>' linktext[4]='<table 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 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 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>中国人</TD></TR> <TR> <TD>第九城市</TD></TR> <TR> <TD>新浪网</TD></TR> <TR> <TD>网易</TD></TR> <TR> <TD>百度一下</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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggjfx.html