快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

ag亚洲国际游戏集团:Javascript滑动菜单(二)



本文示例源代码或素材下载

一、开篇

在上一篇中先容了鼠标点击然后弹出菜单的滑动菜单,这一篇先容鼠标移动弹出菜单的滑动效果。小我觉得鼠标移动的这种滑动菜单更繁杂一些。

二、道理

再次引用上一篇的图

这种菜单和鼠标点击的菜单又有很大年夜的不一样了,下面说一下我这种菜单是若何事情的:

1、首先滑动这种效果的基滥觞基本理在上一篇已经具体阐清楚明了,在这里就不多说了;

2、将按钮和菜单以及他们的所有子元素都添加一个menugroup的Attribute,以便和其他元素差别。并且给这些元素还要绑定mouseover和mouseout事故。这些事故的绑定主如果为了让鼠标移出菜单时菜单不顿时收回,而是要有一个时延才收回,在收回之前移入菜单那么菜单就不会收回了。总的思路是:凡是鼠标移入menugroup,就不必要时延关闭了。凡是移出menugroup时,则开始时延关闭。

3、还要给按钮零丁再添加一个mouseover的事故绑定,主如果用于弹出菜单。

三、代码

留意:这里用到了关于事故的一个简单框架和几个其他函数,详细的可以下载示例后看源文件。 也可以看我之前写的博客文章进行懂得。

SlideMenu

functionSlideMenu(oBtn,oMenu,sMenuId){

varbtn=oBtn;

varmenu=oMenu;

if(menu.id=='')

menu.id=sMenuId;

varmenuGroup=sMenuId

varisOpened=false;

vartimeOutId=null;

//为下拉菜单添加外框

varmenuContainer=document.createElement("div");

menu=menu.parentNode.removeChild(menu);

menuContainer.appendChild(menu);

document.body.appendChild(menuContainer);

//设置外框需要的样式

menuContainer.style.display='block';

menuContainer.style.visibility='visible';

menuContainer.style.overflow='hidden';

menuContainer.style.position='absolute';

//设置下拉菜单的样式

menu.style.position='absolute';

menu.style.overflow='visible';

menu.style.display='block';

menu.style.visibility='hidden';//用户既看不到下拉菜单又可以获取菜单的宽和高

//得到下拉菜单的宽和高

varmenuWidth=menu.offsetWidth;

varmenuHeight=menu.offsetHeight;

//设置下拉菜单容器的宽和高

menuContainer.style.width=menuWidth;

menuContainer.style.height=menuHeight;

//关闭菜单

functionCloseMenu(){

if(!isOpened)

return;

BufferMove('document.getElementById("'+menu.id+'").style.top',0,-menuHeight,30,1,fnCallback);

functionfnCallback(){

menuContainer.style.display='none';

isOpened=false;ag亚洲国际游戏集团

oEventUtil.addEventHandler(btn,"mouseover",btnMouseOver);

}

}

//凡是属于这个group的都有

functionGroupMousag亚洲国际游戏集团eOver(){

clearTimeout(timeOutId);

timeOutId=null;

}

functionGroupMouseOut(){

oEvent=oEventUtil.getEvent();

if(oEvent.relatedTargeag亚洲国际游戏集团t.getAttribute("menugroup")!=menuGroup&&timeOutId==null)

timeOutId=setTimeout(CloseMenu,500);

}

//设置下拉菜单的gag亚洲国际游戏集团roup

functionSetGroup(obj){

obj.setAttribute("menugroag亚洲国际游戏集团up",menuGroup);

oEventUtil.addEventHandler(obj,"mouseover",GroupMouseOver);

oEventUtil.addEventHandler(obj,"mouseout",GroupMouseOut);

for(vari=0;i

应用措施如下:

window.onload=function(){

newSlideMenu($("btn1"),$("menu1"),"menu1");

}

第一个参数是按钮工具,第二个参数是菜单工具,第三个参数是menugroup的字符串,在同一页面内要独一。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: