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 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
浅谈jquery事件处理
Apr 24 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JSON相关知识汇总
Jul 03 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
微信小程序排坑指南详解
May 23 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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令牌 Token改进版
2008/07/18 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
python入门教程 python入门神图一张
2018/03/05 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
关于护士节的演讲稿
2014/05/26 职场文书
销售岗位职责范本
2014/06/12 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
2016新年晚会开场白
2015/12/03 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
python简单验证码识别的实现过程
2021/06/20 Python