1. 函数式

html如下：

  1.     <div class="box">
  2.         <ul class="clear-fix">
  3.             <li class="outer">
  4.                 <a href="#" class="nav">index</a>
  5.                 <ul  class="inter-box clear-fix">
  6.                     <li><a href="#">inter1</a></li>
  7.                     <li><a href="#">inter1</a></li>
  8.                     <li><a href="#">inter1</a></li>
  9.                     <li><a href="#">inter1</a></li>
  10.                 </ul>
  11.             </li>
  12.             <li class="outer">
  13.                 <a href="#" class="nav">index1</a>
  14.                 <ul  class="inter-box clear-fix">
  15.                     <li><a href="#">inter1</a></li>
  16.                     <li><a href="#">inter1</a></li>
  17.                     <li><a href="#">inter1</a></li>
  18.                     <li><a href="#">inter1</a></li>
  19.                 </ul>
  20.             </li>
  21.             <li class="outer">
  22.                 <a href="#" class="nav">index2</a>
  23.                 <ul  class="inter-box clear-fix">
  24.                     <li><a href="#">inter1</a></li>
  25.                     <li><a href="#">inter1</a></li>
  26.                     <li><a href="#">inter1</a></li>
  27.                     <li><a href="#">inter1</a></li>
  28.                 </ul>
  29.             </li>
  30.             <li class="outer">
  31.                 <a href="#" class="nav">index3</a>
  32.                 <ul  class="inter-box clear-fix">
  33.                     <li><a href="#">inter1</a></li>
  34.                     <li><a href="#">inter1</a></li>
  35.                     <li><a href="#">inter1</a></li>
  36.                     <li><a href="#">inter1</a></li>
  37.                 </ul>
  38.             </li>
  39.         </ul>
  40.     </div>

css如下：

  1.     body{
  2.         position: relative;
  3.         z-index:;
  4.     }
  5.     ul,li{list-style: none;}
  6.     *{padding:;margin:;}
  7.         .clear-fix:after{
  8.             content: ".";
  9.             clear: both;
  10.             display: block;
  11.             font-size:;
  12.             height:;
  13.             visibility: hidden;
  14.         }
  15.         .box{
  16.             position: absolute;
  17.             top:;
  18.             left:;
  19.             width: 100%;
  20.             height: 60px;
  21.             z-index:;
  22.             text-align: center;
  23.             background: #ccc;
  24.  
  25.         }
  26.         .outer{
  27.             float: left;
  28.             line-height: 60px;
  29.             padding: 0 15px;
  30.             position: relative;
  31.             /*z-index: -5;*/
  32.         }
  33.  
  34.         .inter-box{
  35.             position: absolute;
  36.             width: 100%;
  37.             top: 60px;
  38.             left:;
  39.             /*display: none;*/
  40.             height: 0px;
  41.             overflow: hidden;
  42.             -webkit-transition:     opacity linear 0.2s 1s;
  43.             -o-transition:     opacity linear 0.2s 1s;
  44.             transition:     opacity linear 0.2s 1s;
  45.  
  46.         }
  47.         .nav{
  48.             display: block;
  49.             width: 100%;
  50.             height: 100%;
  51.         }
  52.         .inter-box li{
  53.             background: #dfdfdf;
  54.             line-height: 30px;
  55.         }

js如下，需引入jquery：

  1.         var timer=initTimer();
  2.         $(".nav").each(function(i,ele){
  3.             $(ele).attr("index",i);
  4.             $(ele).mouseenter(function(){
  5.                 var _this=$(this).attr("index")
  6.                 show(_this);
  7.             })
  8.             $(ele).mouseleave(function(){
  9.                 var _this=$(this).attr("index");
  10.                 hide(_this);
  11.             })
  12.  
  13.         })
  14.         $(".inter-box").each(function(i,ele){
  15.             $(ele).attr("index",i);
  16.             $(ele).mouseenter(function(){
  17.                 console.log(111)
  18.                 var _this=$(this).attr("index")
  19.                 show(_this);
  20.             })
  21.             $(ele).mouseleave(function(){
  22.                 var _this=$(this).attr("index");
  23.                 hide(_this);
  24.             })
  25.         })
  26.         function initTimer(){
  27.             var timer={};
  28.             $(".nav").each(function(i,ele){
  29.                 timer[i]=null;
  30.             });
  31.             return timer;
  32.         }
  33.         function show(nowIndex){
  34.             clearTimeout(timer[nowIndex]);
  35.             $(".inter-box").eq(nowIndex).animate({"height":"300px"});
  36.         }
  37.         function hide(nowIndex){
  38.             timer[nowIndex]=setTimeout(function(){
  39.                 $(".inter-box").eq(nowIndex).animate({"height":"0px"});
  40.             },200)
  41.         }

2. 面向对象

html如下：

  1.     <div class="box">
  2.         <ul class="clear-fix">
  3.             <li class="outer">
  4.                 <a href="#" class="nav">index</a>
  5.                 <ul  class="inter-box clear-fix">
  6.                     <li><a href="#">inter1</a></li>
  7.                     <li><a href="#">inter1</a></li>
  8.                     <li><a href="#">inter1</a></li>
  9.                     <li><a href="#">inter1</a></li>
  10.                 </ul>
  11.             </li>
  12.             <li class="outer">
  13.                 <a href="#" class="nav">index1</a>
  14.                 <ul  class="inter-box clear-fix">
  15.                     <li><a href="#">inter1</a></li>
  16.                     <li><a href="#">inter1</a></li>
  17.                     <li><a href="#">inter1</a></li>
  18.                     <li><a href="#">inter1</a></li>
  19.                 </ul>
  20.             </li>
  21.             <li class="outer">
  22.                 <a href="#" class="nav">index2</a>
  23.                 <ul  class="inter-box clear-fix">
  24.                     <li><a href="#">inter1</a></li>
  25.                     <li><a href="#">inter1</a></li>
  26.                     <li><a href="#">inter1</a></li>
  27.                     <li><a href="#">inter1</a></li>
  28.                 </ul>
  29.             </li>
  30.             <li class="outer">
  31.                 <a href="#" class="nav">index3</a>
  32.                 <ul  class="inter-box clear-fix">
  33.                     <li><a href="#">inter1</a></li>
  34.                     <li><a href="#">inter1</a></li>
  35.                     <li><a href="#">inter1</a></li>
  36.                     <li><a href="#">inter1</a></li>
  37.                 </ul>
  38.             </li>
  39.         </ul>
  40.     </div>

css如下：

  1.     body{
  2.         position: relative;
  3.         z-index:;
  4.     }
  5.     ul,li{list-style: none;}
  6.     *{padding:;margin:;}
  7.         .clear-fix:after{
  8.             content: ".";
  9.             clear: both;
  10.             display: block;
  11.             font-size:;
  12.             height:;
  13.             visibility: hidden;
  14.         }
  15.         .box{
  16.             position: absolute;
  17.             top:;
  18.             left:;
  19.             width: 100%;
  20.             height: 60px;
  21.             z-index:;
  22.             text-align: center;
  23.             background: #ccc;
  24.  
  25.         }
  26.         .outer{
  27.             float: left;
  28.             line-height: 60px;
  29.             padding: 0 15px;
  30.             position: relative;
  31.             /*z-index: -5;*/
  32.         }
  33.  
  34.         .inter-box{
  35.             position: absolute;
  36.             width: 100%;
  37.             top: 60px;
  38.             left:;
  39.             height: 0px;
  40.  
  41.             overflow: hidden;
  42.             -webkit-transition:     opacity linear 0.2s 1s;
  43.             -o-transition:     opacity linear 0.2s 1s;
  44.             transition:     opacity linear 0.2s 1s;
  45.  
  46.         }
  47.         .inter-box li{
  48.             background: #dfdfdf;
  49.             line-height: 30px;
  50.         }
  51.         .nav{
  52.             display: block;
  53.             width:100%;
  54.             height: 100%;
  55.         }

js如下：

  1.         function delayController(obj){
  2.             var _this=this;
  3.             this.set={
  4.                 btn:$(".nav").eq(0),
  5.                 box:$(".box").eq(0),
  6.                 delayTime:200,
  7.                 showFn:function(_this){},
  8.                 hideFn:function(_this){}
  9.             }
  10.             $.extend(this.set,obj);
  11.             this.timer=null;
  12.             this.timer2=null;
  13.             this.set.btn.mouseenter(function(){ show(); })
  14.             this.set.btn.mouseleave(function(){ hide(); })
  15.             this.set.box.mouseenter(function(){ show(); })
  16.             this.set.box.mouseleave(function(){ hide(); })
  17.             function show(){
  18.                 clearTimeout(_this.timer);
  19.                 _this.timer2=setTimeout(function(){
  20.                     _this.set.showFn(_this);
  21.                 },_this.set.delayTime)
  22.             }
  23.             function hide(){
  24.                 clearTimeout(_this.timer2);
  25.                 _this.timer=setTimeout(function(){
  26.                     _this.set.hideFn(_this);
  27.                 },_this.set.delayTime)
  28.  
  29.             }
  30.         }
  31.  
  32.                //调用
  33.         $(".nav").each(function(i,ele){
  34.             new delayController({
  35.                 btn:$(".nav").eq(i),
  36.                 box:$(".inter-box").eq(i),
  37.                 showFn:function(_this){
  38.                     _this.set.box.animate({"height":"200px"});
  39.                 },
  40.                 hideFn:function(_this){
  41.                     _this.set.box.animate({"height":"0px"});
  42.                 }
  43.             });
  44.         })

两种思想实现基于jquery的延时导航菜单，可做延时触发器！的更多相关文章

  1. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  2. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  3. 一款基于jquery的侧边栏导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览   源码下载 实现的代码. html代码 ...

  4. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  5. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  6. 一个基于jQuery的简单树形菜单

    在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...

  7. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  8. koa2实现session的两种方式（基于Redis 和MySQL）

    一.基于MySQL的实现方式 这种方式需要安装koa-session-minimal和koa-mysql-session两个依赖. 执行 npm install koa-session-minimal ...

  9. mybatis学习笔记(四）-- 为实体类定义别名两种方法（基于xml映射）

    下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...

随机推荐

  1. hiho_offer收割18_题解报告_差第四题

    I.求逆元欧几里得方法 II.模拟细心+耐心 *本人感悟:自己的错误在于:对于这道模拟题没有耐心静下来一字一字看题,一行一行调错,一步一步调试,我要引以为戒. III.dpf[i][j][k]=max ...

  2. 在windows上部署使用Redis出现问题的解决方法

    下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.目前的是2.8.12版的,直接解压,在\bin\release 目录下有个压缩包, ...

  3. Object和泛型

    这俩东东呢实现的效果是一样的,但是它们俩的效率不一样,原理也不一样.直接说结论吧,泛型比Object好用,效率高.因为Object有一个装箱和拆箱的过程,倘若是很多的数据那效率就低到不行了,而泛型没有 ...

  4. 【DS】排序算法之快速排序（Quick Sort）

    一.算法思想 快速排序,顾名思义,效率比较于其他算法,效率比较高.<算法导论>也专门对其进行讲解.其算法设计使用分治思想,如下: 1)从数组A[p...r]中选择一个元素,将数组划分成两个 ...

  5. Lua程序设计（三）面向对象实现一个简单的类

    1.Lua面向对象实现步骤 ①创建一个全局表(称之为元表) ②设置这个元表的__index值(值通常为元表自己,这样就能通过__index查找到对应的属性和方法)__index 赋值其实是一个func ...

  6. ASP.NET实现网站的自动升级

    网站的自动升级主要是要实现从一台服务器上下载某些文件到本服务器上,然后对下载下来的文件进行更新等操作. 比如,现在有服务器A,服务器B和客户端C. 作为COM公司开发的产品DIV网站系统被安装到服务器 ...

  7. Django中合并同一个model的多个QuerySet

    [1]相同modelarticles1 = Article.objects.order_by("autoid").filter(autoid__lt = 16).values('a ...

  8. centos7.2 安装 composer

    安装Composer https://pkg.phpcomposer.com/#how-to-install-composer  # 下载composer.phar curl -sS https:// ...

  9. 洛谷 P3320: bzoj 3991: LOJ 2182: [SDOI2015]寻宝游戏

    题目传送门:LOJ #2182. 题意简述: 一棵 \(n\) 个节点的树,边有边权. 每个点可能是关键点,每次操作改变一个点是否是关键点. 求所有关键点形成的极小联通子树的边权和的两倍. 题解: 有 ...

  10. windows下nodejs服务器的安装与配置

    1下载安装 download from the link: https://nodejs.org/en/ windows下的安装直接运行exe,略过-- 注:由于用户权限的问题,最好将nodejs安装 ...