jQuery實現滑動門程式碼例項

螞蟻小編發表於2017-02-26
jQuery

滑動門效果在大量的網頁中都有應用，可能表現形式不一樣，但是原理都是大同小異，下面是一段簡單滑動門程式碼例項，通過此例項我們詳細介紹一下它的實現過程，希望對需要的朋友帶來幫助。

例項程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>jQuery實現的滑動門例項程式碼-螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  font-size:12px;
}
ul li{
  list-style:none;
  float:left;
  background-color:#999;
  cursor:pointer;
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
}
ul li.bg{
  background-color:#9F0;
}
.div{
  width:200px;
  height:60px;
  background:#666;
  line-height:60px;
  text-align:center;
}
.none{
  display:none
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("ul li").each(function(i){ 
    $(this).hover(function(){ 
      $(this).addClass("bg").siblings().removeClass("bg"); 
      $(".div:eq("+i+")").show().siblings(".div").hide(); 
    }) 
  }) 
}) 
</script>
</head>
<body>
<ul style="overflow:hidden">
  <li class="bg">標題一</li>
  <li>標題二</li>
</ul>
<div class="div">螞蟻部落一</div>
<div class="div none">螞蟻部落二</div>
</body>
</html>

以上程式碼實現了簡單的滑動門效果，下面簡單介紹一下它的實現過程。

一.實現原理:

1.預設狀態下的展現:

在預設狀態下，兩個座位標題的li都是顯示的，不過第一個li使用樣式class為其新增了背景色。關於內容部分，第一個div是顯示的，第二個則是隱藏的，因為為其加添了樣式類none。

2.當滑鼠在標題上滑動的時候:

為作為標題的li註冊hover事件處理函式，此函式可以將當前滑鼠指標所在的li新增樣式類bg，並且將相應索引作為內容的div設定為顯示狀態。大體原理就是這樣的，具體可以參閱程式碼註釋。

二.程式碼註釋:

1.$(function(){})，當穩當結構完全載入完畢之後再去執行函式中的程式碼。

2.$("ul li").each(function(i){})，遍歷ul下的li元素，並以每一個li作為上下文執行函式，函式中的引數i是當前li在li集合中的索引位置，從0開始的。

3.$(this).hover(function(){})，為當前li註冊hover事件處理函式。

4.$(this).addClass("bg").siblings().removeClass("bg")，為當前的li新增bg樣式類，而其他的兄弟元素則刪除bg樣式類。

5.$(".div:eq("+i+")").show().siblings(".div").hide()，當對應索引的div設定為顯示，其他的兄弟元素則被隱藏。

三.相關閱讀:

1.each()函式可以參閱jQuery each()一章節。

2.hover事件可以參閱jQuery hover事件一章節。

3.addClass()函式可以參閱jQuery addClass()一章節。

4.siblings()函式可以參閱jQuery siblings()一章節。

5.eq選擇器可以參閱jQuery :eq()選擇器一章節。

6.show()函式可以參閱jQuery show()一章節。

7.hide()函式可以參閱jQuery hide()一章節。

相關文章