制作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 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Vue路由前后端设计总结
Aug 06 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
面试常见的js算法题
2017/03/23 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
简析Python的闭包和装饰器
2016/02/26 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
社区工作者演讲稿
2014/05/23 职场文书
保密工作承诺书
2014/08/29 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
酒店开业主持词
2015/07/02 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
Python实现批量自动整理文件
2022/03/16 Python
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js