制作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 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
js本地图片预览实现代码
Oct 09 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
了解JavaScript函数中的默认参数
May 30 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
javascript实现移动端轮播图
2020/12/09 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
Python中psutil的介绍与用法
2019/05/02 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书