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 12 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
redux处理异步action解决方案
Mar 22 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
JavaScript类和继承 prototype属性
2010/09/03 Javascript
validator验证控件使用代码
2010/11/23 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
js实现抽奖效果
2017/03/27 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python 获取本机ip地址的两个方法
2013/02/25 Python
python实现通过shelve修改对象实例
2014/09/26 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
一个C/C++编程面试题
2013/11/10 面试题
学校运动会霸气口号
2014/06/07 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
结婚堵门保证书
2015/05/08 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS