jq插件之仿“卓越亚马逊”首页弹出菜单效果
2008-07-02 22:51
375 查看
/*弹出式菜单*/
//没剑 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在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。
//没剑 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在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。
相关文章推荐
- jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
- 我写的类似本站首页左上角的菜单的效果插件,基于MooTools 1.4
- Android仿新浪微博首页加号弹出菜单效果
- 名站技术分析 — tudou网首页下列菜单的弹出效果
- 我写的类似本站首页左上角的菜单的效果插件,基于MooTools 1.4
- 竖向三级弹出菜单,模仿京东商城的首页菜单效果
- jquery实现隐藏在左侧的弹性弹出菜单效果
- jquery实现隐藏在左侧的弹性弹出菜单效果
- Jquery实现弹出层分享微博插件具备动画效果
- Android 仿 新闻阅读器 菜单弹出效果(附源码DEMO)
- Android实现类似于PC中的右键弹出菜单效果
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
- MSDN首页菜单导航条,有阴影效果的按钮。分析。
- 纯CSS(无JS)实现的二级弹出菜单效果代码
- 关于GUI菜单弹出隐藏的效果
- 使用contextMenu插件实现Bootstrap table弹出右键菜单
- 10 个非常酷的基于jQuery的菜单效果插件 《转》
- js+css position:relative;absolute;仿大众点评网首页 左边菜单效果[实例]
- EasySwift/YXJKxMenu 微信,qq首页右上角的菜单效果