jQuery手风琴效果代码实例

我心飞翔 分类:实例代码

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

代码实例如下:

<!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手风琴效果代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容