jQuery案例：图文滑动手风琴特效
Posted 流楚丶格念
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery案例：图文滑动手风琴特效相关的知识，希望对你有一定的参考价值。
效果展示
项目链接
https://download.csdn.net/download/weixin_45525272/36144267
代码
用到的jQuery是jquery.min.js
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>jQuery图文内容滑动手风琴特效</title>
<meta name="description" content="Neat">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/style.js"></script>
</head>
<body>
<div class="main-group">
<ul class="content">
<li class="item-group self">
<h3 class="title" data-index="0">
夏日阳光，带你欣赏
</h3>
<div class="desc">
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<p>
和煦的春风轻轻的摇着在岸边挺拔的杨树、亭亭玉立的柳树。在阳光的照耀下，树叶显得光彩夺目。
</p>
<p>
她的脚步那么轻盈，她的绿纱巾那么撩人心神。一日之季在于晨，一年之季在于春。春天在我们的心中是那么的重要，在生命的故事里，春天，她是那么的让我们倍感亲切。
</p>
<a class="btn" href="#">点击进入</a>
</div>
<div class="img">
<img src="./imgs/1.jpeg" alt="">
</div>
</li>
<li class="item-group">
<h3 class="title" data-index="1">
夏日阳光，带你欣赏
</h3>
<div class="desc">
<p>
夏日的晴空是明媚的，天是湛蓝深远的，太阳像火球般的烤着大地，阳光是那样强烈，天上地下处于一片耀眼的光明之中。阳光洒在荡漾的河面上，泛起万点金光，像一颗颗晶莹的小星，顽皮的向人们眨着眼睛。
</p>
<p>
初夏，石榴花渐渐开放了，绿叶衬红花，美丽极了。远望，它像一片烘烘燃烧的烈火，又像黄昏升起的红艳艳的晚霞。
</p>
<p>
暖和的春天过去了，严热的夏天又来了，太阳高高地挂在天上，大地被阳光烘烤着，植物都被晒得不行了，动物们躲在阴凉的地方休息。
</p>
<a class="btn" href="#">点击进入</a>
</div>
<div class="img">
<img src="./imgs/2.jpeg" alt="">
</div>
</li>
<li class="item-group">
<h3 class="title" data-index="2">
夏日阳光，带你欣赏
</h3>
<div class="desc">
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<a class="btn" href="#">点击进入</a>
</div>
<div class="img">
<img src="./imgs/3.jpeg" alt="">
</div>
</li>
<li class="item-group">
<h3 class="title" data-index="3">
夏日阳光，带你欣赏
</h3>
<div class="desc">
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<p>
躺在树荫下，感觉着风轻轻拂过脸庞，一缕缕阳光透过树叶间的缝隙，在地上映出一片，摆放在阳台的各个角落，在阳光的照耀下，赏心悦目，既是一幅图画，也是一种风景，洋，溢着浓浓的生活气息。欣赏着，心中荡漾着别样的幸福与满足。
</p>
<a class="btn" href="#">点击进入</a>
</div>
<div class="img">
<img src="./imgs/1.jpeg" alt="">
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Action({
title_item: $('.title'),
item: $('.item-group')
});
</script>
</html>
CSS
html, body{
min-height: 100%;
}
*{
margin:0;
padding:0;
font-size: 12px;
}
ul{
list-style:none;
}
.hide{
display: none;
}
.lf{
float: left;
}
.lr{
float: right;
}
.red, .red a,.red a h5, .red a p{
color:#FF0000 !important;
}
html{
/* background: #f0efef; */
}
a {
text-decoration: none;
color: inherit;
}
.main-group{
width:100vw;
height:100vh;
background: #efefef;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width:1000px;
height:330px;
display: flex;
}
.item-group{
display: flex;
justify-content: center;
align-items: center;
height:390px;
position: relative;
width: 45px;
overflow: hidden;
transition: all .4s;
}
.item-group .title{
width:330px;
height:36px;
line-height: 36px;
text-indent: 24px;
left:-146px;
background: #ee6475;
color: #fff;
font-size: 14px;
font-weight: bold;
transform: rotate(-90deg);
position: absolute;
cursor: pointer;
z-index: 1;
}
.item-group .desc{
box-sizing: border-box;
height: 330px;
background: #fff;
padding:30px 30px 30px calc(30px + 36px);
color: #666;
flex: 1;
opacity: 0;
transition: all 0.4s;
}
.item-group .desc p{
margin-bottom:16px;
width: 505px;
}
.item-group .desc .btn{
margin-top:30px;
display: inline-block;
padding:10px 30px;
border-radius: 20px;
color: #fff;
background: #ee6475;
}
.item-group .img img{
width: 280px;
opacity: 0;
box-sizing: border-box;
border:4px solid #fff;
transition: all 0.4s;
}
.item-group.self{
width:100%;
}
.item-group.self .desc{
opacity: 1;
}
.item-group.self .img img{
opacity: 1;
}
/* .item-group .desc, .item-group .img{
width: 0;
overflow: hidden;
opacity: 0;
transition: all 1s;
}
.item-group .desc{
width: 36px;
padding:0;
}
.item-group.self .desc, .item-group.self .img{
width: auto;
opacity: 1;
}
.item-group.self .desc{
padding:30px 30px 30px calc(30px + 36px);
} */
js
class Action{
constructor(parameter) {
this._title_item = parameter.title_item;
this._item = parameter.item;
this._index = 0;
this._add_event();
}
_add_event(){
let that = this;
this._title_item.click(function(){
let this_index = $(this).attr('data-index');
if(that._index != this_index){
that._item.removeClass('self');
that._item.eq(this_index).addClass('self');
that._index = this_index;
}
});
}
}
以上是关于jQuery案例：图文滑动手风琴特效的主要内容，如果未能解决你的问题，请参考以下文章