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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
js使用递归解析xml
Dec 12 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
JS hashMap实例详解
2016/05/26 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
django数据库migrate失败的解决方法解析
2018/02/08 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
pycharm安装及如何导入numpy
2020/04/03 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
电子专业推荐信范文
2013/11/18 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
国防教育标语
2014/10/08 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
免职证明样本
2014/10/23 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
小学教师读书笔记
2015/07/01 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL