jquery插件之仿“卓越亞馬遜”首頁彈出菜單效果_jquery

代碼如下:
/*彈出式菜單*/
//沒劍 2008-07-03
//http://regedit.cnblogs.com
/*參數(shù)說明*/
//showobj:要顯示的菜單ID
//timeout：延時(shí)時(shí)間,鼠標(biāo)停留/離開后延時(shí)多久開始顯示/隱藏菜單
//speed：菜單顯示速度，數(shù)字越大，顯示越慢,默認(rèn)為100
//調(diào)用示例:$("#button").DMenu("#content");
jQuery.fn.DMenu=function(showobj,timeout,speed){
timeout=timeout?timeout:300;
speed=speed?speed:100;
//按鈕對(duì)象
var button=$(this);
//延時(shí)計(jì)數(shù)器
var timer=null;
//隱藏的浮動(dòng)層
var hideDiv=$("");
//容器對(duì)象
var Container=$("");
Container.hide();
hideDiv.append(Container);
//菜單對(duì)象
var jqShowObj=$(showobj);
//隱藏菜單
jqShowObj.hide();
//菜單顯示的狀態(tài)
var display=false;
//按鈕的offset
var offset=button.offset();
//菜單區(qū)高
var height=jqShowObj.height();
//菜單區(qū)寬
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;
}
//設(shè)置容器屬性
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();
//給容器加個(gè)黑邊框
Container.css({
border:"1px solid #666666"
});
//顯示定位層
//高寬慢慢增大
Container.animate({
marginTop:btnHeight+4,
height:height+4,
width:width+4,
opacity:'100'},speed,function(){
//動(dòng)畫結(jié)束時(shí) start//
//顯示菜單
jqShowObj.show();
//添加菜單入容器
Container.append(jqShowObj);
//去除邊框
Container.css({
border:"0px"
});
//顯示狀態(tài)置為true
display=true;
//鼠標(biāo)移入
jqShowObj.mouseover(function(){
clearTimeout(timer);
});
//鼠標(biāo)移開
jqShowObj.mouseout(function(){
hideMenu();
});
//動(dòng)畫結(jié)束時(shí) end//
});
};
//****顯示菜單方法結(jié)束****//

//****隱藏菜單方法開始****//
var hideMenu=function(){
clearTimeout(timer);
//延時(shí)隱藏菜單
timer=setTimeout(function(){
//顯示邊框
Container.css({
border:"1px solid #666666"
});
//清空容器
Container.empty();
//收縮容器
Container.animate({
width:btnWidth,height:btnHeight,marginTop:'0', opacity: '0'
}, speed,function(){
//動(dòng)畫結(jié)束時(shí) start//
//隱藏容器
Container.hide();
//定位層隱藏
hideDiv.hide();
//顯示狀態(tài)置為false
display=false;
//動(dòng)畫結(jié)束時(shí) end//
});
}, timeout);
};
//****隱藏菜單方法結(jié)束****//

//綁定按鈕鼠標(biāo)經(jīng)過事件
button.hover(function(e){
//延時(shí)顯示菜單
clearTimeout(timer);
timer=setTimeout(function(){
showMenu();
}, timeout);
},function(){
clearTimeout(timer);
//鼠標(biāo)離開按鈕時(shí)，如果菜單還是顯示狀態(tài)則隱藏
if(display){
timer=setTimeout(function(){
hideMenu();
},timeout);
}
});
};

注：對(duì)于select擋住彈出菜單的問題，因?yàn)榕c插件沒有關(guān)系，所以在此，偶沒有解決，放哪個(gè)select在哪只是想提醒大家使用彈出菜單時(shí)要注意到這個(gè)問題，具體的解決方法可以自動(dòng)搜索，或者在排版上作調(diào)整。
文件打包下載

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com