JS实现带延时功能的推拉门菜单效果

本文给出了一个带有延时功能的推拉门菜单效果的JS实现实例。分享给大家参考。具体如下：

这是一个鼠标诱导延时的推拉门菜单，其实就是一个推拉门。但是，鼠标向上移动后不会立即做出反应，而是略有延迟。使用这个菜单也是有益的。这个时间可以根据你的喜好来调整。你可以很容易地修改这个推拉门的外观，把它变成一个有扩展内容的菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题鼠标感应延迟的选项卡菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .CMS { font-size :12 px宽度宽度：200像素线高：30 px}.CMS ul，李{列表式：无；margin:0pxpadding:0px}。内容管理系统.TabTop { clear:both高度：30 px}.内容管理系统.场流分级法(field flow fractionation)高度：30 px}.内容管理系统.TabTop li { display:inline宽度：50 px高度：30 pxfloat:left文本对齐：居中；光标：指针指针；}.内容管理系统.Con _ id { clear:both背景# FF9900高度：70 px文本对齐：居中；}.内容管理系统.ul _ id1 { background: # 000000}。内容管理系统.ul_id1 .Li _ id0 { color: # FFFF00}。内容管理系统.ul _ id2 { background: # FF6600}。内容管理系统.ul_id2 .Li _ id1 { color: # FFFF00}。内容管理系统.ul _ id3 { background: # 3366FF}。内容管理系统.ul_id3 .Li _ id2 { color: # FFFF00}。CMSbox{}/stylescript语言='javascript'//获取可操作的id函数GetObj(Objid){ if(document。GetElementBYid){返回eval('文档。GetElementBYid(' Objid ' ')')))；} else { if(文档。layers){ return eval('文档。层[' Objid ' ']')；} else { return eval('文档。“全部，”objid)；} } } var Me函数TagTab(arr){这个。cur tab=arr[0]；this . arr=arr for(var I=0；长度；i ){ var lis=arr[i].getElementsByTagName(' Li ')；for(var j=0；jlis.lengthj ){ lis[j].tag=j；lis[j].fac=这个；lis[j].onmouseover=function(){ Me=this；窗户。settimeout(' me。fac。显示('这个。标记“)；”，MDelayTime)；} } }这个。show=function(I){ this。柯塔布。风格。显示='无'；这个。arr[I]。风格。display=' block这个。CurTab=这个。arr[I]；} }窗口。onload=function(){ var oneTab=new tag tab([GetObj(' Con _ id0 ')、GetObj('Con_id1 ')、GetObj(' Con _ id2 ')])；var两个标签=新标签标签([GetObj(' Con _ ID3 ')、GetObj('Con_id4 ')、GetObj(' Con _ id5 ')])；}//延迟标签var MDelayTime=300/剧本/床头柜！-第一个切换实体- div class='CMS' id='CMS_id0 '！-Con _ id0-div class=' Con _ id ' id=' Con _ id0 ' div class=' TabTop ' ul class=' ul _ id1 ' Li class=' Li _ id0 ' id=' Tab _ id0 '上海/li li class='Li_id1' id='Tab_id1 '北京/li li class='Li_id2' id='Tab_id2 '广州/li /ul /div div class='CMSbox '上海的内容/div /div！-Con _ id1-div class=' Con _ id ' id=' Con _ id1 ' style=' display : none；'div class=' TabTop ' ul class=' ul _ id2 ' Li class=' Li _ id0 ' id=' Tab _ id0 '上海/li li class='Li_id1' id='Tab_id1 '北京/li li class='Li_id2' id='Tab_id2 '广州/li /ul /div div class='CMSbox '北京的内容/div /div！-Con _ id2-div class=' Con _ id ' id=' Con _ id2 ' style=' display : none；'div class=' TabTop ' ul class=' ul _ ID3 ' Li class=' Li _ id0 ' id=' Tab _ id0 '上海/li li class='Li_id1' id='Tab_id1 '北京/li li class='Li_id2' id='Tab_id2 '广州/li /ul /div div class='CMSbox '广州的内容/div /div/divbr！-第二个切换实体- div class='CMS' id='CMS_id1 '！-Con _ id0-div class=' Con _ id ' id=' Con _ ID3 ' div class=' TabTop ' ul class=' ul _ id1 ' Li class=' Li _ id0 ' id=' Tab _ ID3 '广东/li li class='Li_id1' id='Tab_id4 '江苏/li li class='Li_id2' id='Tab_id5 '山东/li /ul /div div class='CMSbox '广东的内容/div /div！-Con _ id1-div class=' Con _ id ' id=' Con _ id4 ' style=' display : none；'div class=' TabTop ' ul class=' ul _ id2 ' Li class=' Li _ id0 ' id=' Tab _ ID3 '广东/li li class='Li_id1' id='Tab_id4 '江苏/li li class='Li_id2' id='Tab_id5 '山东/li /ul /div div class='CMSbox '江苏的内容/div /div！-Con _ id2-div class=' Con _ id ' id=' Con _ id5 ' style=' display : none；'div class=' TabTop ' ul class=' ul _ ID3 ' Li class=' Li _ ID0 ' id=' Tab _ ID3 '广东/li li class='Li_id1' id='Tab_id4 '江苏/li li class='Li_id2' id='Tab_id5 '山东/li /ul /div div class='CMSbox '山东的内容/div /div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。