效果展示
项目链接
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; } }); } }
