惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Attack and Defense Labs
Attack and Defense Labs
The GitHub Blog
The GitHub Blog
C
Check Point Blog
博客园_首页
MongoDB | Blog
MongoDB | Blog
N
Netflix TechBlog - Medium
F
Full Disclosure
Microsoft Security Blog
Microsoft Security Blog
爱范儿
爱范儿
Recent Announcements
Recent Announcements
阮一峰的网络日志
阮一峰的网络日志
G
GRAHAM CLULEY
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
T
Threat Research - Cisco Blogs
C
Cybersecurity and Infrastructure Security Agency CISA
V
Vulnerabilities – Threatpost
K
Kaspersky official blog
博客园 - 司徒正美
S
Schneier on Security
T
The Exploit Database - CXSecurity.com
Project Zero
Project Zero
云风的 BLOG
云风的 BLOG
Cisco Talos Blog
Cisco Talos Blog
Know Your Adversary
Know Your Adversary
雷峰网
雷峰网
V
V2EX - 技术
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Spread Privacy
Spread Privacy
罗磊的独立博客
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
S
Security Affairs
SecWiki News
SecWiki News
Schneier on Security
Schneier on Security
O
OpenAI News
Jina AI
Jina AI
PCI Perspectives
PCI Perspectives
Cyberwarzone
Cyberwarzone
Y
Y Combinator Blog
Apple Machine Learning Research
Apple Machine Learning Research
B
Blog RSS Feed
I
InfoQ
D
Docker
P
Palo Alto Networks Blog
Recorded Future
Recorded Future
M
MIT News - Artificial intelligence
博客园 - Franky
B
Blog
Scott Helme
Scott Helme
博客园 - 叶小钗
D
DataBreaches.Net

博客园 - 没剑

一段实现页面上的图片延时加载的js 失业了,别人不会告诉你的10件事 正确的SWOT分析方法(转) 界面内容优化的层次(转) 常用的CSS命名规则 jq图片预加载+自动等比例缩放插件 实现firebird的Embedded模式(.net 3.5) Interbase/Firebird的SQL语法(收藏) mvc preview 2中,找到的一段表单数据填充实体的函数 jquery插件:web2.0分格的分页脚,可用于ajax无刷新分页 jquery插件:任意位置浮动固定层(09-11-05更新插件) jquery调用WebService和WebService输出JSON 兼容ie firefox 半透明效果 再次发布一个jq的下拉框式日期选择插件 dateSelector ~ 发布一个jQuery做的导航菜单的插件 submenu js让网页标题闪动效果(记) 关于接口使用getType的方法的问题 - 没剑 终于找到个可以在sql2000下用的正则啦,哈哈 定时删除sql中睡眠的进程 - 没剑
jq插件之仿“卓越亚马逊”首页弹出菜单效果
没剑 · 2008-07-02 · via 博客园 - 没剑

/*弹出式菜单*/
//没剑 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在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。