本文主要是介绍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案例：图文滑动手风琴特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
