jq插件之仿“卓越亚马逊”首页弹出菜单效果
转自http://www.cnblogs.com/regedit/archive/2008/07/02/1234340.html
/*弹出式菜单*/
//没剑 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);
}
});
};
分享到:
相关推荐
代码如下:/*弹出式菜单*/ //没剑 2008-07-03 //http://regedit.cnblogs.com /*参数说明*/ //showobj:要显示的菜单ID //timeout:延时时间,鼠标停留/离开后延时多久开始显示/隐藏菜单 //speed:菜单显示速度,数字越...
插件描述:点击按钮右侧弹出菜单. 参考示例:http://www.jq22.com/jquery-info5210
JQ导航弹性下拉菜单,可用于各种网页前段特效的使用
使用jq实现二级菜单效果,jq下拉菜单效果,这个下拉菜单,一般大多数人都选择使用ui框架,但是也有人还是需要jq实现的,写个demo分享给大家
asp.net弹出框Jq插件用法模板ajax调用 学习模板!Jq弹出框插件asp ajax post技术
jQ长按鼠标左键弹出菜单 jQuery长按鼠标左键弹出快捷菜单代码.zip
单图。多图查看,旋转,放大缩小 jq插件
JQ弹出框 页面遮罩 页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html,
集合了一个jq的开源插件,只需要简单的配置,就开源得到自己想要的任何弹出层效果,非常非常好的一个资源,拿来跟大家共享了。
jQ长按鼠标左键弹出菜单是一款基于jquery实现的长按鼠标左键弹出快捷菜单代码。
最优秀的50个JQ插件最优秀的50个JQ插件最优秀的50个JQ插件最优秀的50个JQ插件最优秀的50个JQ插件最优秀的50个JQ插件
jq实现点击图片弹出大图
JQ鼠标经过标题向上弹出特效 JQ鼠标经过标题向上弹出特效 JQ鼠标经过标题向上弹出特效 JQ鼠标经过标题向上弹出特效
jquery仿div透明模态弹出窗插件下载
jq 插件,实现拖拽
JQuery鼠标点击动画弹出图片菜单是一款仿苹果官网的鼠标点击动画向下弹出图片菜单代码。
jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件jq 验证码插件
仿iPhone手机界面导航菜单,应用jQuery技术,DIV+CSS架构。 该网页菜单包含文件:html,css,js,images(PNG)
jquery特效插件FancyBox弹出层支持多种方式弹出层如:图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox