本文實例講述了JS實現具備延時功能的滑動門菜單效果。分享給大家供大家參考。具體如下：
這是一款鼠標感應時間延遲的滑動門菜單，其實也就是一滑動門，只不過鼠標在移上后不是立即反應，而是稍微遲緩了一下，這樣用也是有好處的，這個時間根據你的喜好是可以調整的，本滑動門你可輕易修改外觀，把它變成一個內容擴展的菜單。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
