脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js早期滑动门菜单效果

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

 更新时间：2015年08月27日 10:53:03   作者：企鹅  
这篇文章主要介绍了js实现的早期滑动门菜单效果代码,涉及javascript数组遍历及通过鼠标事件动态改变页面元素属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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>
<!-- 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 分享JavaScript与Java中MD5使用两个例子

    分享JavaScript与Java中MD5使用两个例子

    这篇文章主要为大家分享了JavaScript与Java中MD5使用两个例子，
    2015-12-12
  • 如何丰富alt属性的显示效果

    如何丰富alt属性的显示效果

    如何丰富alt属性的显示效果...
    2007-01-01
  • JavaScript对象的特性与实践应用深入详解

    JavaScript对象的特性与实践应用深入详解

    这篇文章主要介绍了JavaScript对象的特性与实践应用,结合实例形式较为深入的分析了javascript对象的相关概念、操作方法及注意事项,需要的朋友可以参考下
    2018-12-12
  • js实现黑色简易的滑动门网页tab选项卡效果

    js实现黑色简易的滑动门网页tab选项卡效果

    这篇文章主要介绍了js实现黑色简易的滑动门网页tab选项卡效果,可实现简单的鼠标滑过tab项切换对应菜单的功能,涉及javascript鼠标事件控制页面元素的遍历与样式改变实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript中的16进制字符介绍

    JavaScript中的16进制字符介绍

    最早接触到\unnn之类的字符是在微软的官网上。当时在网上找了一下这中字符格式，却不知道该搜什么
    2011-10-10
  • JS判断数组那点事

    JS判断数组那点事

    在面试过程中经常被面试官问到这样的题目：如何判断数组？下面小编就针对这个问题给大家收集整理了份资料，感兴趣的朋友一起看看吧
    2017-10-10
  • 犀利的js 函数集合

    犀利的js 函数集合

    和同事讨论js时，我说较为理想的状态是，把js当一把好用的匕首，随手拿来，捅一刀子就走。话虽如此，但现实生活中大部分时候的情况是不理想的。
    2009-06-06
  • 基于JS实现textarea中获取动态剩余字数的方法

    基于JS实现textarea中获取动态剩余字数的方法

    这篇文章主要介绍了基于JS实现textarea中获取动态剩余字数的方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-05-05
  • 详解vue-cli+es6引入es5写的js(两种方法)

    详解vue-cli+es6引入es5写的js(两种方法)

    本文通过两种方法给大家介绍vue-cli+es6引入es5写的js，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-04-04
  • javaScript同意等待代码实现心得

    javaScript同意等待代码实现心得

    javaScript功能描述：本程序实现在同意某某协议页面对同意按钮进行十秒钟的禁用，同时在按钮的Value显示倒计时。
    2011-01-01

最新评论