jQuery下拉菜单鼠标悬浮全屏遮罩特效-插件特效-星河码客

一款使用jQuery制作的下拉菜单鼠标滑过全屏遮罩特效插件。该下拉菜单插件当鼠标滑过菜单项时，会出现一个半透明的全屏遮罩将屏幕遮住，效果十分不错。HTML菜单使用一个无序列表遮罩，class为oe_overlay的div将用来做全屏遮罩：

Collections
- Summer 2011
- Milano
Projects
...
Fragrances
- Fashion Fragrances
- Deálure
- Violet Woman
- Deep Blue for Men
- New York, New York
- Illusion
Events
...
Stores
...

JAVASCRIPT首先设置一下变量参数：var $oe_menu = $('#oe_menu');var $oe_menu_items = $oe_menu.children('li');var $oe_overlay = $('#oe_overlay');当鼠标hover任何的菜单项时，将为它添加classslided和selected。这时相应的二级菜单将从上边滑出，其他的将回缩。这里将二级菜单的z-index设置为一个很大的数。当鼠标移出菜单，将去除classselected。$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');});下面来看一下遮罩层的代码。将遮罩层的透明度调整到0.6，并在wrapper上添加classhovered，这样菜单仍然显示是白色的。$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();})

jQuery下拉菜单鼠标悬浮全屏遮罩特效

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»