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 相关文章推荐
菜鸟javascript基础资料整理2
Dec 06 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
分析JS单线程异步io回调的特性
Dec 01 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
客服主管岗位职责
2013/12/13 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS