快捷導(dǎo)航

JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果

更新時(shí)間：2015年09月17日 15:27:25 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果,涉及JavaScript基于鼠標(biāo)事件與時(shí)間函數(shù)實(shí)現(xiàn)頁(yè)面樣式延遲變換功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)具備延時(shí)功能的滑動(dòng)門(mén)菜單效果。分享給大家供大家參考。具體如下：

這是一款鼠標(biāo)感應(yīng)時(shí)間延遲的滑動(dòng)門(mén)菜單，其實(shí)也就是一滑動(dòng)門(mén)，只不過(guò)鼠標(biāo)在移上后不是立即反應(yīng)，而是稍微遲緩了一下，這樣用也是有好處的，這個(gè)時(shí)間根據(jù)你的喜好是可以調(diào)整的，本滑動(dòng)門(mén)你可輕易修改外觀，把它變成一個(gè)內(nèi)容擴(kuò)展的菜單。

運(yùn)行效果截圖如下：

在線演示地址如下：

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>鼠標(biāo)感應(yīng)延遲的選項(xiàng)卡菜單</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];
 }
}
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")]);
}
//延遲標(biāo)簽
var MDelayTime=300;
</script>
</head>
<body>
<!--第一個(gè)切換實(shí)體 -->
<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">上海的內(nèi)容</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">北京的內(nèi)容</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">廣州的內(nèi)容</div>
 </div>
</div>
<br>
<!--第二個(gè)切換實(shí)體 -->
<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">廣東的內(nèi)容</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">江蘇的內(nèi)容</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">山東的內(nèi)容</div>
 </div>
</div>
</body>
</html>

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: