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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
jquery map方法使用示例
Apr 23 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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文件缓存方法总结
2016/03/16 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
python类中super()和__init__()的区别
2016/10/18 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python xpath获取页面注释的方法
2019/01/14 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
商务英语求职自荐信范文
2013/12/24 职场文书
综治维稳工作汇报
2014/10/27 职场文书
民事和解协议书格式
2014/11/29 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers