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


Posted in Javascript onDecember 25, 2008
/*弹出式菜单*/ 
//没剑 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 相关文章推荐
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
javascript 快速排序函数代码
May 30 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
ASP SQL防注入的方法
Dec 25 #Javascript
jQuery 位置插件
Dec 25 #Javascript
jQuery 浮动广告实现代码
Dec 25 #Javascript
jQuery 操作XML入门
Dec 25 #Javascript
jQuery 动画基础教程
Dec 25 #Javascript
javascript jQuery插件练习
Dec 24 #Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php页面函数设置超时限制的方法
2014/12/01 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
node thread.sleep实现示例
2018/06/20 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python使用str &amp; repr转换字符串
2016/10/13 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python交互界面的退出方法
2019/02/16 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
分厂厂长岗位职责
2013/12/29 职场文书
全神贯注教学反思
2014/02/03 职场文书
八项规定整改方案
2014/02/21 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL