【HTML+CSS+JQ】滑动淡入效果

最新推荐文章于 2023-05-19 10:20:31 发布

NpcCat

最新推荐文章于 2023-05-19 10:20:31 发布

阅读量2.8k

点赞数 10

文章标签： html css js jquery

本文链接：https://blog.csdn.net/NpcCat/article/details/109526355

版权

滑动淡入

源码
- HTML+JS+JQ部分
- CSS部分
效果

源码

HTML+JS+JQ部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" href="CSS/enter.css" rel="stylesheet" />
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script type="text/javascript">
			$(function(){
			
				$(document).on( 'scroll', function(){
					var h = $(window).scrollTop();
					var maxh = $(document).height();
					var currh = $(window).height();
					var num = Math.ceil((h-100)/160);
					var str = ".peo_box"+num;
					if(h>100 && h<(maxh-currh-1)){
						$(str).addClass('lishow');
					}else if(h>=(maxh-currh-1)){
						$('.peo_box').addClass('lishow');
					}else{
						$('.peo_box').removeClass('lishow');
					}
					
					
				});
			
			});
			
		</script>
	</head>
	<body>
		<div class="container">
			<div class="top"></div>
			<div class="bottom">
				<div class="title">List</div>
				<div>
					<ul>
						<li>
							<div class="peo_box1 peo_box">
							<img class="picture" src="pic/touxiang.jpg" alt="">
							<div class="content">
								<h5 class="name">name1</h5>
								<p class="p1">BiliBili is a well-known video barrage website in China, where there are the most timely animation, the best ACG atmosphere and the most creative up owner. You can find a lot of fun here</p>
							</div>
							</div>
						</li>
						
						<li>
							<div class="peo_box2 peo_box">
							<img class="picture" src="pic/touxiang.jpg" alt="">
							<div class="content">
								<h5 class="name">name2</h5>
								<p class="p2">BiliBili is a well-known video barrage website in China, where there are the most timely animation, the best ACG atmosphere and the most creative up owner. You can find a lot of fun here</p>
							</div>
							</div>
						</li>
						
						<li>
							<div class="peo_box3 peo_box">
							<img class="picture" src="pic/touxiang.jpg" alt="">
							<div class="content">
								<h5 class="name">name3</h5>
								<p class="p3">BiliBili is a well-known video barrage website in China, where there are the most timely animation, the best ACG atmosphere and the most creative up owner. You can find a lot of fun here</p>
							</div>
							</div>
						</li>
						
						<li>
							<div class="peo_box4 peo_box">
							<img class="picture" src="pic/touxiang.jpg" alt="">
							<div class="content">
								<h5 class="name">name4</h5>
								<p class="p4">BiliBili is a well-known video barrage website in China, where there are the most timely animation, the best ACG atmosphere and the most creative up owner. You can find a lot of fun here</p>
							</div>
							</div>
						</li>
						
						<li>
							<div class="peo_box5 peo_box">
							<img class="picture" src="pic/touxiang.jpg" alt="">
							<div class="content">
								<h5 class="name">name5</h5>
								<p class="p5">BiliBili is a well-known video barrage website in China, where there are the most timely animation, the best ACG atmosphere and the most creative up owner. You can find a lot of fun here</p>
							</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

CSS部分

*{
	padding: 0;
	margin: 0;
}
body{
	background: #eeeeee;
}
.container{
	
	width: 80%;
	background: white;
	margin: 50px auto;
}
.top{
	width: 100%;
	height: 500px;
}
.bottom{
	text-align: center;
	width: 100%;
	
}
.title{
	font-size: 45px;
	color: black;
	text-align: left;
	padding-left: 5%;
}
ul{
	list-style: none;
}
.peo_box{
	height: 100px;
	width: 100%;
	padding: 30px 0;
	opacity: 0;
	visibility: hidden;
	transition: 0.5s;
	position: relative;
	top: 30px;
}
.lishow{
	visibility: visible;
	top: 0;
	opacity: 1;
}
.picture{
	border-radius: 50%;
	height: 100%;
	width: 10%;
	display: inline-block;
}
.content{
	height: 15%;
	width: 80%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding-left: 2%;
}
.name{
	line-height: 40px;
	font-size: 20px;
}