本章节分享一段代码实例，它实现了手风琴式图片展示效果。
代码实例如下:
<!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手风琴效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。
本文地址： http://www.zzsi.net/code/web/98667.html
本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。
