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

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月30日04:31:23 评论 132 views
广告也精彩
复制代码 代码如下:

/*弹出式菜单*/

//没剑 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=$("

");

//容器对象

var Container=$("

");

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在哪只是想提醒大家使用弹出菜单时要注意到这个问题,具体的解决方法可以自动搜索,或者在排版上作调整。

文件打包下载

企鹅博客
  • 本文由 发表于 2019年9月30日04:31:23
  • 转载请务必保留本文链接:https://www.qieseo.com/382644.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...

发表评论