制作jquery遮罩层效果导航菜单代码分享


Posted in Javascript onDecember 25, 2013

jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重。因此必须要使用一个效果:jquery遮罩层。利用明暗效果来突出当前用户的操作。

$(function() {
var $oe_menu= $('#oe_menu');
var $oe_menu_items= $oe_menu.children
('li');
var $oe_overlay= $('#oe_overlay');
                $oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-
index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not
('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children
('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 
0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 
0);
$oe_menu_items.children('div').hide();
})
});
Javascript 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
基于input动态模糊查询的实现方法
Dec 12 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
JavaScript原型链详解
Nov 07 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 #Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 #Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 #Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 #Javascript
JS中如何设置readOnly的值
Dec 25 #Javascript
简体中文转换繁体中文(实现代码)
Dec 25 #Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 #Javascript
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
js中for in的用法示例解析
2013/12/25 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python getopt详解及简单实例
2016/12/30 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
伊索寓言教学反思
2014/05/01 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
客服专员岗位职责范本
2015/04/07 职场文书