jq插件之仿“卓越亚马逊”首页弹出菜单效果
/*弹出式菜单*/
/*参数说明*/
//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在哪只是想提醒大家使用弹出菜单时要注意到这个问题，具体的解决方法可以自动搜索，或者在排版上作调整。
点击下载此文件
