JS实现具备延时功能的滑动门菜单效果


Posted in Javascript onSeptember 17, 2015

本文实例讲述了JS实现具备延时功能的滑动门菜单效果。分享给大家供大家参考。具体如下:

这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单。

运行效果截图如下:

JS实现具备延时功能的滑动门菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标感应延迟的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.CMS{font-size:12px;width:200px;line-height:30px;}
.CMS ul,li{list-style:none;margin:0px;padding:0px;}
.CMS .TabTop{clear:both;height:30px;}
.CMS .TabTop ul{color:#FFF;height:30px;}
.CMS .TabTop li{display:inline;width:50px;height:30px;float:left;text-align:center;cursor:pointer;}
.CMS .Con_id{clear:both;background:#FF9900;height:70px;text-align:center;}
.CMS .ul_id1 {background:#000000;}
.CMS .ul_id1 .Li_id0{color:#FFFF00;}
.CMS .ul_id2 {background:#FF6600;}
.CMS .ul_id2 .Li_id1{color:#FFFF00;}
.CMS .ul_id3 {background:#3366FF;}
.CMS .ul_id3 .Li_id2{color:#FFFF00;}
.CMSbox{}
</style>
<script language="javascript">
//获取可操作的ID
function GetObj(objID){
 if(document.getElementById){
  return eval('document.getElementById("' + objID + '")');
 }
 else{
  if(document.layers){
   return eval("document.layers['" + objID + "']");
  }
  else{
   return eval('document.all.' + objID);
  }
 }
}
var Me;
function TagTab(arr){
 this.curTab=arr[0];
 this.arr = arr;
 for(var i=0;i<arr.length;i++){
  var lis = arr[i].getElementsByTagName("li");
  for(var j=0;j<lis.length;j++){
   lis[j].tag=j;
   lis[j].fac=this;
   lis[j].onmouseover =function(){
    Me=this;
    window.setTimeout("Me.fac.show("+this.tag+");",MDelayTime);
   }
  }
 }
 this.show = function(i){
  this.curTab.style.display='none';
  this.arr[i].style.display = 'block';
  this.curTab = this.arr[i];
 }
}
window.onload=function(){
 var oneTab = new TagTab([GetObj("Con_id0"),GetObj("Con_id1"),GetObj("Con_id2")]);
 var twoTab = new TagTab([GetObj("Con_id3"),GetObj("Con_id4"),GetObj("Con_id5")]);
}
//延迟标签
var MDelayTime=300;
</script>
</head>
<body>
<!--第一个切换实体 -->
<div class="CMS" id="CMS_id0">
 <!--Con_id0-->
 <div class="Con_id" id="Con_id0">
  <div class="TabTop">
   <ul class="ul_id1">
    <li class="Li_id0" id="Tab_id0" >上海</li>
    <li class="Li_id1" id="Tab_id1" >北京</li>
    <li class="Li_id2" id="Tab_id2" >广州</li>
   </ul>
  </div>
  <div class="CMSbox">上海的内容</div>
 </div>
 <!--Con_id1-->
 <div class="Con_id" id="Con_id1" style="display:none;">
  <div class="TabTop">
   <ul class="ul_id2">
    <li class="Li_id0" id="Tab_id0" >上海</li>
    <li class="Li_id1" id="Tab_id1" >北京</li>
    <li class="Li_id2" id="Tab_id2" >广州</li>
   </ul>
  </div>
  <div class="CMSbox">北京的内容</div>
 </div>
 <!--Con_id2-->
 <div class="Con_id" id="Con_id2" style="display:none;">
  <div class="TabTop">
   <ul class="ul_id3">
    <li class="Li_id0" id="Tab_id0" >上海</li>
    <li class="Li_id1" id="Tab_id1" >北京</li>
    <li class="Li_id2" id="Tab_id2">广州</li>
   </ul>
  </div>
  <div class="CMSbox">广州的内容</div>
 </div>
</div>
<br>
<!--第二个切换实体 -->
<div class="CMS" id="CMS_id1">
 <!--Con_id0-->
 <div class="Con_id" id="Con_id3">
  <div class="TabTop">
   <ul class="ul_id1">
    <li class="Li_id0" id="Tab_id3">广东</li>
    <li class="Li_id1" id="Tab_id4" >江苏</li>
    <li class="Li_id2" id="Tab_id5">山东</li>
   </ul>
  </div>
  <div class="CMSbox">广东的内容</div>
 </div>
 <!--Con_id1-->
 <div class="Con_id" id="Con_id4" style="display:none;">
  <div class="TabTop">
   <ul class="ul_id2">
    <li class="Li_id0" id="Tab_id3" >广东</li>
    <li class="Li_id1" id="Tab_id4" >江苏</li>
    <li class="Li_id2" id="Tab_id5" >山东</li>
   </ul>
  </div>
  <div class="CMSbox">江苏的内容</div>
 </div>
 <!--Con_id2-->
 <div class="Con_id" id="Con_id5" style="display:none;">
  <div class="TabTop">
   <ul class="ul_id3">
    <li class="Li_id0" id="Tab_id3">广东</li>
    <li class="Li_id1" id="Tab_id4" >江苏</li>
    <li class="Li_id2" id="Tab_id5">山东</li>
   </ul>
  </div>
  <div class="CMSbox">山东的内容</div>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
js实现验证码功能
Jul 24 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 #Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 #Javascript
JQuery入门基础小实例(1)
Sep 17 #Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 #Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 #Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
Div Select挡住的解决办法
2008/08/07 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
python进行两个表格对比的方法
2018/06/27 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python全栈开发语法总结
2020/11/22 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
教师的实习鉴定
2013/12/15 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
贷款委托书怎么写
2014/08/02 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
婚庆答谢词大全
2015/09/29 职场文书
孩子满月酒答谢词
2015/09/30 职场文书