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 相关文章推荐
一个JQuery写的点击上下滚动的小例子
Aug 27 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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 array_walk() 数组函数
2011/07/12 PHP
php判断变量类型常用方法
2012/04/24 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
搬迁通知
2015/04/20 职场文书
活动宣传稿范文
2015/07/23 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
索尼ICF-5900W收音机测评
2022/04/24 无线电