两种思想实现基于jquery的延时导航菜单,可做延时触发器!
1. 函数式
html如下:
<div class="box">
<ul class="clear-fix">
<li class="outer">
<a href="#" class="nav">index</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index1</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index2</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index3</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
</ul>
</div>
css如下:
body{
position: relative;
z-index:;
}
ul,li{list-style: none;}
*{padding:;margin:;}
.clear-fix:after{
content: ".";
clear: both;
display: block;
font-size:;
height:;
visibility: hidden;
}
.box{
position: absolute;
top:;
left:;
width: 100%;
height: 60px;
z-index:;
text-align: center;
background: #ccc; }
.outer{
float: left;
line-height: 60px;
padding: 0 15px;
position: relative;
/*z-index: -5;*/
} .inter-box{
position: absolute;
width: 100%;
top: 60px;
left:;
/*display: none;*/
height: 0px;
overflow: hidden;
-webkit-transition: opacity linear 0.2s 1s;
-o-transition: opacity linear 0.2s 1s;
transition: opacity linear 0.2s 1s; }
.nav{
display: block;
width: 100%;
height: 100%;
}
.inter-box li{
background: #dfdfdf;
line-height: 30px;
}
js如下,需引入jquery:
var timer=initTimer();
$(".nav").each(function(i,ele){
$(ele).attr("index",i);
$(ele).mouseenter(function(){
var _this=$(this).attr("index")
show(_this);
})
$(ele).mouseleave(function(){
var _this=$(this).attr("index");
hide(_this);
}) })
$(".inter-box").each(function(i,ele){
$(ele).attr("index",i);
$(ele).mouseenter(function(){
console.log(111)
var _this=$(this).attr("index")
show(_this);
})
$(ele).mouseleave(function(){
var _this=$(this).attr("index");
hide(_this);
})
})
function initTimer(){
var timer={};
$(".nav").each(function(i,ele){
timer[i]=null;
});
return timer;
}
function show(nowIndex){
clearTimeout(timer[nowIndex]);
$(".inter-box").eq(nowIndex).animate({"height":"300px"});
}
function hide(nowIndex){
timer[nowIndex]=setTimeout(function(){
$(".inter-box").eq(nowIndex).animate({"height":"0px"});
},200)
}
2. 面向对象
html如下:
<div class="box">
<ul class="clear-fix">
<li class="outer">
<a href="#" class="nav">index</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index1</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index2</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
<li class="outer">
<a href="#" class="nav">index3</a>
<ul class="inter-box clear-fix">
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
<li><a href="#">inter1</a></li>
</ul>
</li>
</ul>
</div>
css如下:
body{
position: relative;
z-index:;
}
ul,li{list-style: none;}
*{padding:;margin:;}
.clear-fix:after{
content: ".";
clear: both;
display: block;
font-size:;
height:;
visibility: hidden;
}
.box{
position: absolute;
top:;
left:;
width: 100%;
height: 60px;
z-index:;
text-align: center;
background: #ccc; }
.outer{
float: left;
line-height: 60px;
padding: 0 15px;
position: relative;
/*z-index: -5;*/
} .inter-box{
position: absolute;
width: 100%;
top: 60px;
left:;
height: 0px; overflow: hidden;
-webkit-transition: opacity linear 0.2s 1s;
-o-transition: opacity linear 0.2s 1s;
transition: opacity linear 0.2s 1s; }
.inter-box li{
background: #dfdfdf;
line-height: 30px;
}
.nav{
display: block;
width:100%;
height: 100%;
}
js如下:
function delayController(obj){
var _this=this;
this.set={
btn:$(".nav").eq(0),
box:$(".box").eq(0),
delayTime:200,
showFn:function(_this){},
hideFn:function(_this){}
}
$.extend(this.set,obj);
this.timer=null;
this.timer2=null;
this.set.btn.mouseenter(function(){ show(); })
this.set.btn.mouseleave(function(){ hide(); })
this.set.box.mouseenter(function(){ show(); })
this.set.box.mouseleave(function(){ hide(); })
function show(){
clearTimeout(_this.timer);
_this.timer2=setTimeout(function(){
_this.set.showFn(_this);
},_this.set.delayTime)
}
function hide(){
clearTimeout(_this.timer2);
_this.timer=setTimeout(function(){
_this.set.hideFn(_this);
},_this.set.delayTime) }
} //调用
$(".nav").each(function(i,ele){
new delayController({
btn:$(".nav").eq(i),
box:$(".inter-box").eq(i),
showFn:function(_this){
_this.set.box.animate({"height":"200px"});
},
hideFn:function(_this){
_this.set.box.animate({"height":"0px"});
}
});
})
两种思想实现基于jquery的延时导航菜单,可做延时触发器!的更多相关文章
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 一款基于jquery的侧边栏导航
之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 一个基于jQuery的简单树形菜单
在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 t ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
- koa2实现session的两种方式(基于Redis 和MySQL)
一.基于MySQL的实现方式 这种方式需要安装koa-session-minimal和koa-mysql-session两个依赖. 执行 npm install koa-session-minimal ...
- mybatis学习笔记(四)-- 为实体类定义别名两种方法(基于xml映射)
下面示例在mybatis学习笔记(二)-- 使用mybatisUtil工具类体验基于xml和注解实现 Demo的基础上进行优化 以新增一个用户为例子,原UserMapper.xml配置如下: < ...
随机推荐
- PASCAL VOC数据集分析(转)
PASCAL VOC数据集分析 PASCAL VOC为图像识别和分类提供了一整套标准化的优秀的数据集,从2005年到2012年每年都会举行一场图像识别challenge. 本文主要分析PASCAL V ...
- Spark记录-Scala类与对象小例子
//基类-Person class Person(val na: String, val ag: Int) { //属性 var name: String = na var age: Int = ag ...
- bzoj千题计划174:bzoj1800: [Ahoi2009]fly 飞行棋
http://www.lydsy.com/JudgeOnline/problem.php?id=1800 圆上两条直径构成矩形的对角线 #include<cstdio> using nam ...
- CIKM Competition数据挖掘竞赛夺冠算法陈运文
CIKM Competition数据挖掘竞赛夺冠算法陈运文 背景 CIKM Cup(或者称为CIKM Competition)是ACM CIKM举办的国际数据挖掘竞赛的名称.CIKM全称是Intern ...
- JAVA多线程之线程的挂起与恢复(suspend方法与resume方法)
一,介绍 本文讨论JAVA多线程中,使用 thread.suspend()方法暂停线程,使用 thread.resume()恢复暂停的线程 的特点. 先介绍二个关于线程的基本知识: ①线程的执行体是r ...
- 被误解的 Node.js
http://www.ibm.com/developerworks/cn/web/1201_wangqf_nodejs/ 被误解的 Node.js
- [机器学习&数据挖掘]SVM---软间隔最大化
根据上个硬间隔最大化已经知道,在解决线性可分数据集的分类问题时,求得拉格朗日乘子.w.b就得到分离超平面,然后就可以进行分类,软间隔最大化是针对非线性可分的数据集,因为并不是数据集在可分的时候会出现一 ...
- SDWebImage源码阅读-第二篇
一 SDWebImageManager的downloadImageWithURL的方法 上一篇,我们刚开了个头,分析了一下开始加载图片之前如何取消其他正在下载的任务,接着,我们回到 - (void) ...
- expect 交互
expect expect 是一种自动交互语言,能实现在shell脚本中为scp和ssh等自动输入密码自动登录. exp_continue # 多个spawn命令时并行 interact # 执行完成 ...
- G - DNA sequence HDU - 1560
题目链接: https://vjudge.net/contest/254151#problem/G AC代码: #include<iostream> #include<cstring ...