Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery 插件之仿“卓越亚马逊”首页弹出菜单效果

jquery 插件之仿“卓越亚马逊”首页弹出菜单效果

发布时间:2013-09-20   编辑:www.jquerycn.cn
用jquery实现的弹出菜单插件
jquery实现的弹出菜单插件

复制代码 代码如下:

/*弹出式菜单*/
//没剑 2008-07-03
//http://regedit.cnblogs.com
/*参数说明*/
//showobj:要显示的菜单ID
//timeout:延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单
//speed:菜单显示速度,数字越大,显示越慢,默认为100
//调用示例:$("#button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300;
speed=speed?speed:100;
//按钮对象
var button=$(this);
//延时计数器
var timer=null;
//隐藏的浮动层
var hideDiv=$("<div></div>");
//容器对象
var Container=$("<div id=\"Container\"></div>");
Container.hide();
hideDiv.append(Container);
//菜单对象
var jqShowObj=$(showobj);
//隐藏菜单
jqShowObj.hide();
//菜单显示的状态
var display=false;
//按钮的offset
var offset=button.offset();
//菜单区高
var height=jqShowObj.height();
//菜单区宽
var width=jqShowObj.width();
//按钮的高
var btnHeight=button.height();
//按钮的宽
var btnWidth=button.width();
//定位层放到最前面
$(document.body).prepend(hideDiv);
//放到容器中
//Container.append(jqShowObj);

//****显示菜单方法开始****//
var showMenu=function(){
//如果菜单为显示则退出操作
if (display)
{
return false;
}
//设置容器属性
Container.css({
margin:"0 auto",
width:btnWidth+"px",
height:btnHeight+"px"
});
//定位隐藏层
hideDiv.css({
position:"absolute",
top:offset.top+"px",
left:offset.left+(btnWidth/2)-(width/2)+"px",
height:height+"px",
width:width+"px"
}).show();
//给容器加个黑边框
Container.css({
border:"1px solid #666666"
});
//显示定位层
//高宽慢慢增大
Container.animate({
marginTop:btnHeight+4,
height:height+4,
width:width+4,
opacity:'100'},speed,function(){
//动画结束时 start//
//显示菜单
jqShowObj.show();
//添加菜单入容器
Container.append(jqShowObj);
//去除边框
Container.css({
border:"0px"
});
//显示状态置为true
display=true;
//鼠标移入
jqShowObj.mouseover(function(){
clearTimeout(timer);
});
//鼠标移开
jqShowObj.mouseout(function(){
hideMenu();
});
//动画结束时 end//
});
};
//****显示菜单方法结束****//

//****隐藏菜单方法开始****//
var hideMenu=function(){
clearTimeout(timer);
//延时隐藏菜单
timer=setTimeout(function(){
//显示边框
Container.css({
border:"1px solid #666666"
});
//清空容器
Container.empty();
//收缩容器
Container.animate({
width:btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
}, speed,function(){
//动画结束时 start//
//隐藏容器
Container.hide();
//定位层隐藏
hideDiv.hide();
//显示状态置为false
display=false;
//动画结束时 end//
});
}, timeout);
};
//****隐藏菜单方法结束****//

//绑定按钮鼠标经过事件
button.hover(function(e){
//延时显示菜单
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
//鼠标离开按钮时,如果菜单还是显示状态则隐藏
if(display){
timer=setTimeout(function(){
hideMenu();
},timeout);
}
});
};

注:对于select挡住弹出菜单的问题,因为与插件没有关系,所以在此,偶没有解决,放哪个select在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。
文件打包下载

您可能感兴趣的文章:
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
亚马逊网站导航栏的变迁史
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
基于jquery的15款幻灯片插件
jQuery版仿Path菜单效果
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
jQuery右键菜单插件 jQuery ContextMenu
jQuery菜单插件 Smooth Navigational Menu
2013年优秀jQuery插件整理小结
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

[关闭]