JavaScript滑動門特效詳解

admin發表於2018-08-12
JavaScript特效

本章節分享一段程式碼例項，它實現了簡單的滑動門效果。

其實所謂的滑動門就是選項卡效果的一種形式而已，下面就介紹一下它的實現過程。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
body,ul,li{
  margin:0;
  padding:0;
}
body{font:12px/1.5 Tahoma;}
#outer{
  width:450px;
  margin:10px auto;
}
#tab{
  overflow:hidden;
  zoom:1;
  background:#000;
  border:1px solid #000;
}
#tab li{
  float:left;
  color:#fff;
  height:30px;
  cursor:pointer;
  line-height:30px;
  list-style-type:none;
  padding:0 20px;
}
#tab li.current{
  color:#000;
  background:#ccc;
}
#content{
  border:1px solid #000;
  border-top-width:0;
}
#content ul{
  line-height:25px;
  display:none;
  margin:0 30px;
  padding:10px 0;
}
</style>
<script> 
window.onload = function (){
 var oLi = document.getElementById("tab").getElementsByTagName("li");
 var oUl = document.getElementById("content").getElementsByTagName("ul");
 for(var index=0;index<oLi.length;index++){
   oLi[index].index=index;
   oLi[index].onmouseover=function (){
     for(var n=0; n<oLi.length;n++){
       oLi[n].className="";
     } 
     this.className="current";
     for(var n=0;n<oUl.length;n++){
       oUl[n].style.display="none";
     } 
     oUl[this.index].style.display="block"
  } 
 }
}
</script>
</head>
<body>
<div id="outer">
  <ul id="tab">
    <li class="current">螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
  </ul>
  <div id="content">
    <ul style="display:block;">
      <li>網頁特效原理分析</li>
      <li>響應使用者操作</li>
      <li>提示框效果</li>
      <li>事件驅動</li>
      <li>元素屬性操作</li>
      <li>歡迎來到螞蟻部落</li>
    </ul>
    <ul>
      <li>高重用性函式的編寫</li>
      <li>迴圈及遍歷操作</li>
      <li>偵錯程式的簡單使用</li>
      <li>for迴圈配合if判斷</li>
      <li>className的使用</li>
      <li>innerHTML的使用</li>
    </ul>
    <ul>
      <li>變數、型別、typeof、資料型別轉換、變數作用域</li>
      <li>閉包：什麼是閉包、簡單應用、閉包缺點</li>
      <li>運算子：算術、賦值、關係、邏輯、其他運算子</li>
      <li>程式流程控制：判斷、迴圈、跳出</li>
      <li>命名規範：命名規範及必要性、匈牙利命名法</li>
      <li>本站的url地址是softwhy.com</li>
    </ul>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function (){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oLi = document.getElementById("tab").getElementsByTagName("li")，獲取id屬性值為tab的元素下所有li元素集合，在這裡就是獲取滑動門標題li元素。

（3）.var oUl = document.getElementById("content").getElementsByTagName("ul")，和上面的原理是一樣的，這裡是獲取內容部分ul元素集合。

（4）.for(var index=0;index<oLi.length;index++){}，遍歷每一個標題li元素。

（5）.oLi[index].index=index，為當前索引的li元素新增一個index屬性，然後賦值為index。

（6）.oLi[index].onmouseover=function (){}，為當前li元素註冊onmouseover事件處理函式。

（7）.for(var n=0; n<oLi.length;n++){

  oLi[n].className="";

}，將所有的標題li元素的class屬性值清空。

（8）.this.className="current"，將當前li元素的class屬性值設定為current。

（9）.for(var n=0;n<oUl.length;n++){

  oUl[n].style.display="none";

} ,遍歷每一個標題li元素。

由於標題li元素和內容ul元素是對應的，那麼就可以利用這個特點將所有的內容ul元素隱藏。

（10）.oUl[this.index].style.display="block"，然後將當前對應索引的內容ul元素設定為顯示。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件參閱javascript mouseover事件一章節。

（3）.className屬性參閱js className一章節。

相關文章