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 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jQuery简单实现日历的方法
May 04 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
vue 扩展现有组件的操作
Aug 14 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php include和require的区别深入解析
2013/06/17 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
javascript工具库代码
2012/03/29 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
React组件生命周期详解
2017/07/03 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
PyQt5实现画布小程序
2020/05/30 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
法人授权委托书样本
2014/09/19 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
学校实习推荐信
2015/03/27 职场文书
春节慰问简报
2015/07/21 职场文书
2015大一新生军训感言
2015/08/01 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫