本文实例讲述了射流研究…实现光滑展开合拢的菜单效果代码。分享给大家供大家参考。具体如下：

这是一个光滑展开又合拢的射流研究…菜单效果，无jQuery插件，完全Java脚本语言代码实现，没有过多修饰，有兴趣的美化一下，肯定是款不错的折叠菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-swift-淡入淡出-菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .W3C。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html tolereta http-equiv=' Content-Type ' Content=' html/txt；charset=utf-8' /title光滑展开合拢的射流研究…菜单效果/title style * { margin 33600；划水：0;}ul、李{列表式：无；} # con { width :164 pxmargin :50 px自动0;} # con H4。top { height :4 px宽度宽度：164px飞越：隐藏；} # con H4。底部{高度：4 px宽度宽度：164px飞越：隐藏；} # con div { height:0px飞越：隐藏；} # con H3 {边框-顶部：2 px实心# fff边框-底部：1px实心# D6EFFF}/style脚本语言=' JavaScript ' var speed=30var Ocon=null var Oh3LiST=null var ODI vlist=null var OulLiST=null var oldNum=null var clickNum=null var HideTiMer=null var showTiMer=null window。onload=function(){ Ocon=document。GetElementByID(' con ')；oh3列表=Ocon。GetElementsBytagname(' H3 ')；oul list=Ocon。GetElementsBytagname(' ul ')；odiv list=Ocon。GetElementsBytagname(' div ')；for(var I=0；ioUlList.lengthi ){ oH3List[i].徐浩=我；oH3List[i].onclick=function(){ ClickNum=this。徐浩；更改目录()；};} }函数更改目录(){ var old _ num _ 2，点击_ num _ 2；old _ Num _ 2=null click _ Num _ 2=null if(old Num==null){ click _ Num _ 2=click Num；显示计时器=设置间隔('显示ul(' click _ Num _ 2 ')')，速度);} else if(old num==click num){ old _ num _ 2=old num；hideTimer=设置间隔(' hideUl(' old _ num _ 2 ')'，速度);} else { old _ num _ 2=oldnummclick _ num _ 2=clickNumhideTimer=set interval(' hideUl(' old _ num _ 2 ')'，速度);show timer=设置间隔(' show ul(' click _ num _ 2 ')')，速度);} }函数显示ul(num){ var move _ num 1=Math。天花板.右偏列表[num].右侧)/10);if(move _ num 1=1){ odiv list[num]。风格。高度=odiv列表[num].offset ThEight move _ num 1 ' px } else { oldNum=Numclineinterval(showTiMer)；} }函数HideUl(num){ var move _ num 2=Math。ceil((oDivList[num]).右侧)/10);if(move _ num 20){ odiv list[num]。风格。高度=odiv列表[num].偏移量ThEight-move _ num 2 ' px '；} else { clearInterval(HideTiMer)；if(clickNum==num){ oldNum=null；} } }/脚本/头体div id=' con ' H4 class=' top '/H4 h1/h1 H3设计素材/h3分区ul li精品图标/li li图片幻灯/li li网页播放器/Li/ul/分区h3模板素材/h3分区ul li企业网站/li li儿童网站/li li音乐网站/li liDiscuz模板/Li/ul/分区h3脚本下载/H3分区/Li Lijquery/Li LiaJax/Li LipHP/Li/ul/H3分区网页特效/h3分区ul li菜单/li li表单/li li浏览器/Li/ul/div=' bottom '/H4/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。