Web前端：常用组件4.整屏滚动

最新推荐文章于 2024-07-10 15:37:00 发布

Sher_H

最新推荐文章于 2024-07-10 15:37:00 发布

阅读量1.5k

点赞数 1

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/Sher_H/article/details/87905763

版权

本文介绍了Web前端实现整屏滚动的效果，包括鼠标滚轮和点击按钮的交互方式。详细讲解了实现思路，如判断滚动方向、记录页面位置和激活小圆点。同时，针对快速滚动时可能出现的问题，提出了使用函数节流来限制动画执行频率，确保滚动的平滑过渡。

摘要由CSDN通过智能技术生成

4.整屏滚动

（1）实现效果：使用鼠标滚轮，或者点击右边圆圈按钮
在这里插入图片描述

（2）代码实现：

body,ul{
   
	margin:0;
	padding:0;
}

ul{
   list-style:none;}

.pages_con{
   
	position:fixed;
	left:0;
	top:0;
	width:100%;
	overflow:hidden;
}

.pages{
   
	height:600px;
	position:relative;
}
.page1{
   	background-color:orange;}
.page2{
   	background-color:lightgreen;}
.page3{
   	background-color:cyan;}
.page4{
   	background-color:pink;}
.page5{
   	background-color:lightblue;}


.points{
   
	width:16px;
	height:176px;
	position:fixed;
	right:20px;
	top:50%;
	margin-top:-88px;
}

.points li{
   
	width:13px;
	height:13px;
	margin:16px 0;
	border-radius:50%;
	border:1px solid #666;
	cursor:pointer;
}

.points li.active{
   
	background-color:#666;
}

.main_con{
   
	width:900px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-450px;
	margin-top:-200px;
}

.main_con .left_img{
   
	width:363px;
	height:400px;
	float:left;
	position:relative;
	left:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;
}

.main_con .right_info{
   
	width:500px;
	height:300px;
	margin-top:50px;
	float:right;
	font-family:'Microsoft Yahei';
	font-size:20px;
	line-height:50px;
	color:#666;
	text-indent:2em;
	text-align:justify;
	position:relative;
	right:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms