jQuery设置网站首页手风琴特效(1+X Web前端开发初级例题)

黛琳ghz

已于 2023-04-22 01:15:34 修改

阅读量1.5k

点赞数 6

分类专栏： # 1+X Web前端开发职业技能等级证书系列 # jQuery 前端文章标签： jquery html css 前端 1+x web 例题

于 2022-04-22 23:55:19 首次发布

本文链接：https://blog.csdn.net/weixin_53231455/article/details/124357298

版权

前端同时被 3 个专栏收录

172 篇文章 23 订阅

订阅专栏

1+X Web前端开发职业技能等级证书系列

47 篇文章 49 订阅

订阅专栏

jQuery

8 篇文章 2 订阅

订阅专栏

📚文章目录

jQuery siblings() 方法⏬

jQuery addClass() 方法⏬

jQuery removeClass() 方法⏬

jQuery stop() 方法⏬

🎹实现效果

🎹题目要求

❓什么是手风琴特效？

就比如本题的特效是鼠标划过就会出现蓝色背景，然后商品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效果，包括元素的淡入淡出，以及自定义动画等等