📚文章目录
🎹题目要求
❓什么是手风琴特效?
就比如本题的特效是鼠标划过就会出现蓝色背景,然后商品img变大
还有一种比较常见的就是下拉和收回
如图下⏬
还有其他别的样式就不一一介绍了
🎹html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第四题--手风琴</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<section class="main_box">
<div class="box">
<ul>
<li class="on">
<a href="#">
<h3>游戏手机</h3>
<p>王者荣耀版领卷减300</p>
<img src="images/1.png" alt="img">
</a>
</li>
<li>
<a href="#">
<h3>游戏手机</h3>
<p>王者荣耀版领卷减300</p>
<img src="images/2.png" alt="img">
</a>
</li>
<li>
<a href="#">
<h3>游戏手机</h3>
<p>王者荣耀版领卷减300</p>
<img src="images/3.png" alt="img">
</a>
</li>
<li>
<a href="#">
<h3>游戏手机</h3>
<p>王者荣耀版领卷减300</p>
<img src="images/4.png" alt="img">
</a>
</li>
<li>
<a href="#">
<h3>游戏手机</h3>
<p>王者荣耀版领卷减300</p>
<img src="images/5.png" alt="img">
</a>
</li>
</ul>
</div>
</section>
<!--引入jquery库-->
<!-- <script src="______(1)______"></script> -->
<script src="js/jquery.min.js"></script>
<script src="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: 10px auto;
padding: 15px;
}
.box ul{
height:300px;
}
.box ul li{
width: 202px;
height: 300px;
box-shadow: 3px 2px 30px rgba(0,0,0,.1);
float: left;
text-align: center;
position: relative;
transition: all .6s ease-out;
}
.box ul li h3{
padding-top: 30px;
color: #333;
font-size: 18px;
}
.box ul li p{
margin-top: 7px;
color: #666;
font-size: 14px;
}
.box ul li img{
width: 150px;
height: 150px;
position: absolute;
right: 26px;
bottom: 40px;
transition: all .6s ease-out;
}
.box ul .on{
width: 402px;
height: 300px;
background-color: #3288e6;
text-align: left;
}
.box ul .on h3{
padding-left: 20px;
color: #FFF;
}
.box ul .on p{
margin-left: 20px;
color: #FFF;
}
.box ul .on img{
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效果,包括元素的淡入淡出,以及自定义动画等等
🎹实现效果