jQuery设置手风琴特效-阿里云开发者社区

jQuery设置手风琴特效

2022-11-07 105

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 使用jQuery实现手风琴效果

🎹题目要求

编辑

❓什么是手风琴特效？

就比如本题的特效是鼠标划过就会出现蓝色背景，然后商品img变大

还有一种比较常见的就是下拉和收回

如图下⏬

还有其他别的样式就不一一介绍了

🎹html代码

<!doctype html><html><head><metacharset="utf-8"><title>第四题--手风琴</title><linkhref="css/style.css"type="text/css"rel="stylesheet"></head><body><sectionclass="main_box"><divclass="box"><ul><liclass="on"><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/1.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/2.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/3.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/4.png"alt="img"></a></li><li><ahref="#"><h3>游戏手机</h3><p>王者荣耀版领卷减300</p><imgsrc="images/5.png"alt="img"></a></li></ul></div></section><!--引入jquery库--><!-- <script src="______(1)______"></script> --><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/script.js"></script></body></html>

🎹css代码

@charset"utf-8";
/* CSS Document */body{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0; 
list-style: none;
}
a{
text-decoration: none;
}
h3,p{
margin: 0;
font-weight: normal;
}
.main_box{
width: 100%;
position: relative;
}
.box{
width: 1232px;
margin: 10pxauto;
padding: 15px;
}
.boxul{
height:300px;
}
.boxulli{
width: 202px;
height: 300px;
box-shadow: 3px2px30pxrgba(0,0,0,.1);
float: left;
text-align: center;
position: relative;
transition: all.6sease-out;
}
.boxullih3{
padding-top: 30px;
color: #333;
font-size: 18px;
}
.boxullip{
margin-top: 7px;
color: #666;
font-size: 14px;
}
.boxulliimg{
width: 150px;
height: 150px;
position: absolute;
right: 26px;
bottom: 40px;
transition: all.6sease-out;
}
.boxul.on{
width: 402px;
height: 300px;
background-color: #3288e6;
text-align: left;
}
.boxul.onh3{
padding-left: 20px;
color: #FFF;
}
.boxul.onp{
margin-left: 20px;
color: #FFF;
}
.boxul.onimg{
width: 270px;
height: 270px;
position: absolute;
right: 0px;
bottom: 0px;
}

🎹js代码

// 鼠标经过li时触发函数// _____(2)______(function(){//  $(this).___(3)_____('on').__(4)_____().____(5)____('on');// });$(".box li").mouseover(function(){
$(this).stop().addClass("on").siblings().stop().removeClass("on");
});

🎹题目分析

本题的考核是实现手风琴的效果，本题的方法是通过操作类来实现的。

jQuery siblings() 方法⏬

通过操作类 .on 来实现样式的出现和消失

jQuery addClass() 方法⏬

jQuery removeClass() 方法⏬

因为在动画队列里面，动画都是按照顺序执行的，默认只有当前一个动画执行完毕，才会执行后面的动画，本题存在两个动画效果，所以要用stop()的方法来停止动画效果

jQuery stop() 方法⏬

stop()方法适用于所有的jQuery效果，包括元素的淡入淡出，以及自定义动画等等

🎹实现效果

编辑