|
|
復制代碼 代碼如下:
/*彈出式菜單*/
//沒劍 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在哪只是想提醒大家使用彈出菜單時要注意到這個問題，具體的解決方法可以自動搜索，或者在排版上作調整。
文件打包下載
JavaScript技術：jquery 插件之仿“卓越亞馬遜”首頁彈出菜單效果，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
