具备延时成果的滑动门菜单，鼠标感到变色

发布时间：2018-08-18 14:30:31 所属栏目：创业来源：站长网

导读：鼠标感到时刻耽误的滑动门菜单，着实也就是一滑动门，只不外鼠标在移上后不是当即回响，而是轻微迟缓了一下，这样用也是有甜头的，这个时刻按照你的兴趣是可以调解的，本滑动门你可等闲修改外面，把它酿成一个内容扩展的菜单。殊效演示： !DOCTYPE html P

　　鼠标感到时刻耽误的滑动门菜单，着实也就是一滑动门，只不外鼠标在移上后不是当即回响，而是轻微迟缓了一下，这样用也是有甜头的，这个时刻按照你的兴趣是可以调解的，本滑动门你可等闲修改外面，把它酿成一个内容扩展的菜单。

　　殊效演示：

<!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>鼠标感到耽误的选项卡菜单 - Liehuo.Net</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"> //获取可操纵的ID function 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]; } } // 源码来自：猛火下载 http://www.veryhuo.com/down 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">  <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>  <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>  <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">  <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>  <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>  <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><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网