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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
纯JS实现轮播图
Feb 22 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
js实现转动骰子模型
Oct 24 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
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
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
微信JS接口大全
2016/08/25 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python实例一个类背后发生了什么
2016/02/09 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
python绘制玫瑰的实现代码
2020/03/02 Python
基于Python正确读取资源文件
2020/09/14 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
先进典型事迹材料
2014/12/29 职场文书
家庭经济困难证明
2015/06/23 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书