jQuery手風琴效果程式碼例項

antzone發表於2017-04-13
jQuery

本章節分享一段程式碼例項，它實現了手風琴式圖片展示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  background: #f9f9f9;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.wrap {
  width: 800px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.item, .item-end {
  float: left;
  margin: 0 2px;
  width: 50px;
  height: 500px;
  cursor: pointer;
  background: #6c62d1;
  font-size: 24px;
  color: #FFF;
  border-radius: 10px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.item:hover, .item-end:hover {
  background: #2932e1;
}
.select {
  background: #2932e1;
}
.item p, .item-end p {
  margin: 220px auto;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.slide {
  float: left;
  display: none;
  margin: 0 4px;
}
.slide img {
  width: 360px;
  height: 480px;
  margin-top: 10px;
  border-radius: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(".item").click(function () {
    var thisobj = $(this)
    if (!thisobj.next().is(":visible")) {
      if ($(".select").length > 0) {
        if ($(".select").next().length > 0) {
          $(".select").next().animate({ width: "hide" }, 180, function () {
            $(".select").removeClass("select");
            thisobj.addClass("select");
            thisobj.next().animate({ width: "show" }, 180);
          });
        } else {
          $(".select").prev().animate({ width: "hide" }, 180, function () {
            $(".select").removeClass("select");
            thisobj.addClass("select");
            thisobj.next().animate({ width: "show" }, 180);
          });
        }
      } else {
        thisobj.addClass("select");
        thisobj.next().animate({ width: "show" }, 180);
      }
    }
    else {
      thisobj.removeClass("select");
      thisobj.next().animate({ width: "hide" }, 180);
    }
  })
  $(".item-end").click(function () {
    var obj = $(this).prev();
    if (!obj.is(":visible")) {
      if ($(".select").length > 0) {
        $(".select").next().animate({ width: "hide" }, 180, function () {
          $(".select").removeClass("select");
          $(".item-end").addClass("select");
          obj.animate({ width: "show" }, 180);
        });
      } else {
        $(".select").removeClass("select");
        $(".item-end").addClass("select");
        obj.animate({ width: "show" }, 180);
      }
    }
    else {
      $(".select").removeClass("select");
      obj.animate({ width: "hide" }, 180);
    }
  })
})
</script>
</head>
<body>
  <div class="wrap">
    <div class="item"><p>;P1</p></div>
    <div class="slide"><img src="demo/jQuery/img/p1.jpg" /></div>
    <div class="item"><p>;P2</p></div>
    <div class="slide"><img src="demo/jQuery/img/p2.jpg" /></div>
    <div class="item"><p>;P3</p></div>
    <div class="slide"><img src="demo/jQuery/img/p3.jpg" /></div>
    <div class="item"><p>;P4</p></div>
    <div class="slide"><img src="demo/jQuery/img/p4.jpg" /></div>
    <div class="item"><p>;P5</p></div>
    <div class="slide"><img src="demo/jQuery/img/p5.jpg" /></div>
    <div class="item"><p>;P6</p></div>
    <div class="slide"><img src="demo/jQuery/img/p6.jpg" /></div>
    <div class="item"><p>;P7</p></div>
    <div class="slide"><img src="demo/jQuery/img/p7.jpg" /></div>
    <div class="item-end"><p>;P7</p></div>
  </div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body {
  background: #f9f9f9;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

上面的程式碼設定bod的背景顏色

並且刪除body預設的外邊距和內邊距以及尺寸。

[CSS] 純文字檢視 複製程式碼
.wrap {
  width: 800px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

手風琴效果的容器，設定它為居中效果。

[CSS] 純文字檢視 複製程式碼
.item, .item-end {
  float: left;
  margin: 0 2px;
  width: 50px;
  height: 500px;
  cursor: pointer;
  background: #6c62d1;
  font-size: 24px;
  color: #FFF;
  border-radius: 10px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

設定可以點選的豎條的樣式。比如設定兩端圓角，並且使用transition設定元素屬性以動畫方式過渡。

[CSS] 純文字檢視 複製程式碼
.item:hover, .item-end:hover {
  background: #2932e1;
}

設定可以點選豎條滑鼠懸浮時候的樣式，以動畫方式進行。

[CSS] 純文字檢視 複製程式碼
.select {
  background: #2932e1;
}

設定點選展開圖片後對應的可點選豎條的背景顏色。

[CSS] 純文字檢視 複製程式碼
.item p, .item-end p {
  margin: 220px auto;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

設定可點選豎條中p元素的樣式，可以將其旋轉，也就出現了文字傾斜的效果。

[CSS] 純文字檢視 複製程式碼
.slide {
  float: left;
  display: none;
  margin: 0 4px;
}
.slide img {
  width: 360px;
  height: 480px;
  margin-top: 10px;
  border-radius: 10px;
}

設定圖片容器和圖片的相關樣式屬性。

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function () {}）

當文件結構完全載入完畢再去執行函式中的程式碼。

[JavaScript] 純文字檢視 複製程式碼
$(".item").click(function () {}）

為可點選豎條註冊click事件處理函式。

[JavaScript] 純文字檢視 複製程式碼
var thisobj = $(this)

當前點選元素轉換為jQuery物件。

[JavaScript] 純文字檢視 複製程式碼
if (!thisobj.next().is(":visible")) {}

判斷當前點選的豎條後面的元素是否是顯示，也就是說後面的圖片有沒有展開。

[JavaScript] 純文字檢視 複製程式碼
if ($(".select").length > 0) {}

判斷當前是否有展開的圖片。點選一個豎條展開一個圖片，那麼對應的豎條就會被新增上一個select樣式類，如果隱藏圖片，那麼對應的豎條的select樣式類也會被刪除，所以如果length大於0，那麼也就是說有展開的圖片。

[JavaScript] 純文字檢視 複製程式碼
if ($(".select").next().length > 0) {
  $(".select").next().animate({ width: "hide" }, 180, function () {
    $(".select").removeClass("select");
    thisobj.addClass("select");
    thisobj.next().animate({ width: "show" }, 180);
  });
}

如果具有豎條後面的元素大於0，也就是說不是最後一個豎條。

那麼就將豎條後面的元素以動畫方式隱藏。

然後將豎條的select樣式類刪除，並且給當前點選的豎條新增select樣式雷。

最後展開當前點選豎條後面的元素。

[JavaScript] 純文字檢視 複製程式碼
else {
  $(".select").prev().animate({ width: "hide" }, 180, function () {
    $(".select").removeClass("select");
    thisobj.addClass("select");
    thisobj.next().animate({ width: "show" }, 180);
  });
}

如果是最後一個豎條，那麼就將它前面展開的圖片隱藏。

然後刪除此豎條上面的select樣式。

再給當前點選豎條新增select樣式，並以動畫方式顯示後面的圖片。

[JavaScript] 純文字檢視 複製程式碼
else {
  thisobj.addClass("select");
  thisobj.next().animate({ width: "show" }, 180);
}

如果當前沒有展開的圖片。

那麼就為當前點選豎條新增select樣式類。

並展開它下一個緊鄰的圖片。

[JavaScript] 純文字檢視 複製程式碼
else {
  thisobj.removeClass("select");
  thisobj.next().animate({ width: "hide" }, 180);
}

如果當前點選的豎條後面緊鄰的圖片是展開的，由於點選最後一個豎條導致倒數第二個圖片是展開的。

那麼就刪除當前豎條select樣式類。

並且隱藏它後面展開的圖片。

特別說明:後面的程式碼都是一樣的道理，不多介紹。

二.相關閱讀:

（1）.next()可以參閱jQuery next()一章節。

（2）.is()可以參閱jQuery is()一章節。

（3）.animate()可以參閱jQuery animate()一章節。

（4）.removeClass()可以參閱jQuery removeClass()一章節。

相關文章