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开发随笔一 preventDefault的必要
Nov 25 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JQuery学习总结【二】
Dec 01 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
javascript读取本地文件和目录方法详解
Aug 06 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 ss7.5的数据调用 (笔记)
2010/03/08 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python修改MP3文件的方法
2015/06/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python dict如何定义
2020/09/02 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
P/Invoke是什么
2015/07/31 面试题
信息技术专业个人自我评价
2013/12/11 职场文书
交通安全演讲稿
2014/01/07 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
助学金感谢信
2015/01/20 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技