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/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>鼠标感应延迟的选项卡菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">.CMS{font-size:12px;width:200px;line-height:30px;}.CMS ul,li{list-style:none;margin:0px;padding:0px;}.CMS .TabTop{clear:both;height:30px;}.CMS .TabTop ul{color:#FFF;height:30px;}.CMS .TabTop li{display:inline;width:50px;height:30px;float:left;text-align:center;cursor:pointer;}.CMS .Con_id{clear:both;background:#FF9900;height:70px;text-align:center;}.CMS .ul_id1 {background:#000000;}.CMS .ul_id1 .Li_id0{color:#FFFF00;}.CMS .ul_id2 {background:#FF6600;}.CMS .ul_id2 .Li_id1{color:#FFFF00;}.CMS .ul_id3 {background:#3366FF;}.CMS .ul_id3 .Li_id2{color:#FFFF00;}.CMSbox{}</style><script language="javascript">//获取可操作的IDfunction GetObj（objID）{ if（document.getElementById）{return eval（"document.getElementById（"" + objID + ""）"）; } else{if（document.layers）{ return eval（"document.layers["" + objID + ""]"）;}else{ return eval（"document.all." + objID）;} }}var Me;function TagTab（arr）{ this.curTab=arr[0]; this.arr = arr; for（var i=0;i<arr.length;i++）{var lis = arr[i].getElementsByTagName（"li"）;for（var j=0;j<lis.length;j++）{ lis[j].tag=j; lis[j].fac=this; lis[j].onmouseover =function（）{Me=this;window.setTimeout（"Me.fac.show（"+this.tag+"）;",MDelayTime）; }} } this.show = function（i）{this.curTab.style.display="none";this.arr[i].style.display = "block";this.curTab = this.arr[i]; }}window.onload=function（）{ var oneTab = new TagTab（[GetObj（"Con_id0"）,GetObj（"Con_id1"）,GetObj（"Con_id2"）]）; var twoTab = new TagTab（[GetObj（"Con_id3"）,GetObj（"Con_id4"）,GetObj（"Con_id5"）]）;}//延迟标签var MDelayTime=300;</script></head><body><！--第一个切换实体 --><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></div><br><！--第二个切换实体 --><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>

希望本文所述对大家的JavaScript程序设计有所帮助。