집 > 기사 > 웹 프론트엔드 > JS는 지연 function_javascript 기술을 사용하여 슬라이딩 도어 메뉴 효과를 구현합니다.

JS는 지연 function_javascript 기술을 사용하여 슬라이딩 도어 메뉴 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:38:471088검색

이 기사의 예에서는 지연 기능이 있는 슬라이딩 도어 메뉴 효과의 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">
//获取可操作的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")]);
}
//延迟标签
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 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：JS CSS_javascript 기술을 사용하여 TreeMenu 보조 트리 메뉴를 구현하는 전체 예다음 기사：JS CSS_javascript 기술을 사용하여 TreeMenu 보조 트리 메뉴를 구현하는 전체 예

JS는 지연 function_javascript 기술을 사용하여 슬라이딩 도어 메뉴 효과를 구현합니다.

관련 기사