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


Posted in Javascript onAugust 27, 2015

本文实例讲述了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 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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
Dec 16 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
微信小程序实现授权登录
May 15 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 #Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 #Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 #Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 #Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 #Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 #Javascript
javascript引用类型之时间Date和数组Array
Aug 27 #Javascript
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
pandas 选择某几列的方法
2018/07/03 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
Python 求向量的余弦值操作
2021/03/04 Python
工作失误检讨书范文大全
2014/01/13 职场文书
接受捐赠答谢词
2014/01/27 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
银行授权委托书样本
2014/10/13 职场文书
小学端午节活动总结
2015/02/11 职场文书
担保贷款承诺书
2015/04/30 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS