两种思想实现基于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配置如下: < ...
随机推荐
- 【CF706D】Vasiliy's Multiset Trie+贪心
题目大意:需要维护一种数据结构,支持以下三种操作:插入一个数,删除一个数,查询该数据结构中的数异或给定数的最大值. 题解:如果没有删除操作就是一个标准的 Trie 上贪心求最大异或和问题.现在需要支持 ...
- Django通过中间件实现登录验证demo
前提:中间件版的登录验证需要依靠session,所以数据库中要有django_session表. from django.conf.urls import url from django.contri ...
- “Uncaught TypeError: string is not a function”
http://www.cnblogs.com/haitao-fan/archive/2013/11/08/3414678.html 今天在js中写了一个方法叫做search(),然后点击按钮的时候提示 ...
- for循环遍历数组(数组1)
package com.mon10.day24; import java.util.Scanner; /** * 类说明 :计算学生的总成绩和平均分 * @author 作者 : chenyanlon ...
- Java基础-处理json字符串解析案例
Java基础-处理json字符串解析案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 作为一名开发人员,想必大家或多或少都有接触到XML文件,XML全称为“extensible ...
- 配置httpd2.4与常见的I/O模型说明
配置httpd2.4与常见的I/O模型说明 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.httpd2.4访问控制 1.基于IP访问控制: 允许所有主机访问:Require a ...
- 运行fdisk命令时,弹出 bash:fdisk:command not found
原因:命令fdisk 不在你的命令搜索路径中 第一种解决办法,将fdisk添加到你的命令搜索路径中 首先查看你当前的命令搜索路径: [root@host sbin]# echo $PATH/usr/k ...
- 何凯文每日一句打卡||DAY14
- dedecms在linux上安装提示没权限解决办法
web服务器运行的用户与目录所有者用户必须不一样,比如apache运行的用户为root,那么网站目录设置的所有者就应该不能设置为root,而是设置不同于root的用户,如apache. 我们这里假设w ...
- Hash::make与Hash::check
调用方法之前要先去引用: use Illuminate\Support\Facades\Hash; 可以调用 Hash 门面上的 make 方法对存储密码进行哈希: $pwd = Hash::make ...