jQuery手风琴效果代码实例

吐槽君发布于 2年前分类：实例代码

本章节分享一段代码实例，它实现了手风琴式图片展示效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

body {
  background: #f9f9f9;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

上面的代码设置bod的背景颜色

并且删除body默认的外边距和内边距以及尺寸。

.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;
}

设置可以点击的竖条的样式。比如设置两端圆角，并且使用transition设置元素属性以动画方式过渡。

.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);
}

设置可点击竖条中p元素的样式，可以将其旋转，也就出现了文字倾斜的效果。

.slide {
  float: left;
  display: none;
  margin: 0 4px;
}
.slide img {
  width: 360px;
  height: 480px;
  margin-top: 10px;
  border-radius: 10px;
}

设置图片容器和图片的相关样式属性。

$(document).ready(function () {}）

当文档结构完全加载完毕再去执行函数中的代码。

$(".item").click(function () {}）

为可点击竖条注册click事件处理函数。

var thisobj = $(this)

当前点击元素转换为jQuery对象。

if (!thisobj.next().is(":visible")) {}

判断当前点击的竖条后面的元素是否是显示，也就是说后面的图片有没有展开。

if ($(".select").length > 0) {}

判断当前是否有展开的图片。点击一个竖条展开一个图片，那么对应的竖条就会被添加上一个select样式类，如果隐藏图片，那么对应的竖条的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);
  });
}

如果具有竖条后面的元素大于0，也就是说不是最后一个竖条。

那么就将竖条后面的元素以动画方式隐藏。

然后将竖条的select样式类删除，并且给当前点击的竖条添加select样式雷。

最后展开当前点击竖条后面的元素。

else {
  $(".select").prev().animate({ width: "hide" }, 180, function () {
    $(".select").removeClass("select");
    thisobj.addClass("select");
    thisobj.next().animate({ width: "show" }, 180);
  });
}

如果是最后一个竖条，那么就将它前面展开的图片隐藏。

然后删除此竖条上面的select样式。

再给当前点击竖条添加select样式，并以动画方式显示后面的图片。

else {
  thisobj.addClass("select");
  thisobj.next().animate({ width: "show" }, 180);
}

如果当前没有展开的图片。

那么就为当前点击竖条添加select样式类。

并展开它下一个紧邻的图片。

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()一章节。

jQuery手风琴效果代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery手风琴效果代码实例就介绍到这了。

jQuery手风琴效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容