手風琴方式圖片展示效果詳解

admin發表於2019-01-27

本章節分享一段類似於手風琴式圖片展現效果，並且還有分類功能。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
ul{list-style:none}
div.stu_style {
  border-radius:5px;
  box-shadow:0px 1px 2px 1px #a9d6d8;
  background:#fff;
  margin:10px;
  padding:10px;
  width:920px;
}
div.stu_style div.inner_exp {
  height:140px;
  width:919px;
  overflow:hidden;
  position:relative;
}
div.stu_style div.one_exp {
  top:10px;
  position:absolute;
  z-index:1;
  height:140px;
  width:857px;
}
div.stu_style div.one_exp span {
  display:block;
  float:left;
  width:16px;
  height:103px;
  font-size:14px;
  color:#ffe094;
  font-weight:bold;
  background:#fda000;
  padding:37px 7px 0 7px;
  cursor:pointer
}
div.stu_style div.one_exp span.on {
  background:#ffc946;
  color:#ffffff
}
div.stu_style div.exp_2 {
  left:31px;
  z-index:2;
}
div.stu_style div.exp_3 {
  left:62px;
  z-index:3;
}
div.stu_style div.one_exp ul {
  width:817px;
  height:140px;
  float:left;
  background:#ececec;
  padding-left:10px;
}
div.stu_style div.one_exp ul li {
  width:144px;
  height:94px;
  float:left;
  display:inline;
  padding:3px;
  background:#fff;
  box-shadow:0px 0px 2px #999;
  margin:20px 0 0 10px;
}
div.stu_style div.one_exp ul li img {
  width:144px;
  height:94px;
  border:0px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var acCordion=function(){
    var _wrap=$(".stu_style");
    var _oneExp=_wrap.find(".one_exp");
    var _aniWidth=_oneExp.find("ul").width()+10;
    var _num=_oneExp.length;
    _oneExp.find(" span").click(function(){
      if($(this).hasClass("on")){
        return false;
      }   
      var _inx=$(this).parent(".one_exp").index();
      for(var i=0;i<=_inx;i++){
        _oneExp.eq(i).animate({"left":(30*i+1*i)+"px"},500)
      }
      for(var i=_inx+1;i<_num;i++){
        _oneExp.eq(i).animate({"left":(30*i+_aniWidth+i*1)+"px"},500)
      }
      $(this).addClass("on").parent().siblings().find("span").removeClass("on");
    })
  }() 
})
</script>
</head>
<body>
<div class="stu_style">
  <div class="inner_exp">
    <div class="one_exp"> <span>歐美風光</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div class="one_exp exp_2"> <span>絕美自然</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div class="one_exp exp_3"> <span class="on">心怡荒野</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

首先簡單介紹一下CSS是如何控制佈局的，在預設情況下，只會在特效的右側才會顯示圖片，而左側則是顯示分類標題，也就是說只會顯示一個div中的圖片，其他的圖片之所以沒顯示，是因為放置圖片的三個div塊是採用的絕對定位，而左側的兩個div的z-index值要小，所以被遮擋了，並且通過調整left屬性值使相應的div只顯示標題部分即可，具體不多說了，思路大致如此。

一.程式碼註釋:

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

（2）.var acCordion=function(){}()，宣告並執行一個函式。

（3）.var _wrap=$(".stu_style")，獲取class屬性值為stu_style的物件。

（4）.var _oneExp=_wrap.find(".one_exp")，獲取上面獲取的物件下，class屬性值為one_exp的物件。

（5）.var _aniWidth=_oneExp.find("ul").width()+10，這裡之所以新增10，是為了是圖片左右兩端的灰色區域寬度相等，由於li元素的10px左邊內邊距和ul的10px左右內邊距會造成圖片左邊的灰色區域是20px，右邊只是10px，所以要10。

（6）.var _num=_oneExp.length，獲取存放圖片的div塊的數目。

（7）._oneExp.find(" span").click(function(){})，為標題註冊click事件處理函式。

（8）.if($(this).hasClass("on")){return false;}，判斷當前點選的span元素是否具有名稱為on的class屬性，也就是判斷當前圖片欄目是否完全處於展示狀態，如果處於展開狀態，則跳出函式。

（9）.var _inx=$(this).parent(".one_exp").index()，獲取當前被點選標題（span元素）的class屬性值為one_exp的父元素的索引值。

（10）.for(var i=0;i<=_inx;i++)，通過遍歷設定相應放置圖片的div的left屬性值，它的功能是讓索引值小於等於當前被點選標題所在div索引的div向左移動，也就是滿足展現當前被點選標題所在div的第一個條件。

（11）._oneExp.eq(i).animate({"left": (30*i+1*i)+"px"},500)，通過動畫方式設定，值的大小是根據span標題的寬度和為了設定兩個相鄰的標題之間間隔1px而確定的。

（12）.for(var i=_inx+1;i<_num;i++)，如果說上面的註釋9滿足了第一個條件，那麼這個就滿足了第二個條件，也就是設定所以值大於當前被點選標題所在div索引的div的left屬性值，也就是讓滿足這些條件的div向右移動。

（13）._oneExp.eq(i).animate({"left": (30*i+_aniWidth+i*1)+"px"},500)，原理和上面是一樣。

（14）.$(this).addClass("on").parent().siblings().find("span").removeClass("on")，為當前點選的標題（span）新增class屬性on，並且移除其他span的屬性值為on的class。

二.相關閱讀:

（1）.find()函式可以參閱jQuery find()一章節。

（2）.width()函式可以參閱jQuery width()一章節。 

（3）.click事件可以參閱jQuery click事件一章節。 

（4）.hasClass()函式可以參閱jQuery hasClass()一章節。 

（5）.parent()函式可以參閱jQuery parent()一章節。 

（6）.index()函式可以參閱jQuery index()一章節。 

（7）.eq()函式可以參閱jQuery eq()一章節。 

（8）.animate()函式可以參閱jQuery animate()一章節。 

（9）.addClass()函式可以參閱jQuery addClass()一章節。 

（10）.siblings()函式可以參閱jQuery siblings()一章節。 

（11）.removeClass()函式可以參閱jQuery removeClass()一章節。

相關文章