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

/*弹出式菜单*/
//没剑 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);
        }
    });
};

DEMO下载地址

注:对于select挡住弹出菜单的问题,因为与插件没有关系,所以在此,偶没有解决,放哪个select在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。
posted @ 2008-07-02 22:51  没剑  阅读(5660)  评论(7编辑  收藏  举报