整屏滚动

89 阅读 0 评论 59 点赞

我是靠谱客的博主还单身篮球，最近开发中收集的这篇文章主要介绍整屏滚动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在这里插入图片描述
css文件夹下：test.css

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;
}


.moving .main_con .left_img{
	left:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.moving .main_con .right_info{
	right:0;
	opacity:1;
	filter:alpha(opacity=100);
}

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

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


.moving .main_con .right_img{
	top:0;
	opacity:1;
	filter:alpha(opacity=100);
}

.moving .main_con .left_info{
	bottom:0;
	opacity:1;
	filter:alpha(opacity=100);
}




.main_con .center_img{
	width:611px;
	height:337px;
	position:absolute;
	left:50%;
	margin-left:-305px;
	bottom:-50px;
	opacity:0;
	filter:alpha(opacity=0);
	transition:all 1000ms ease 300ms;

}


.moving .main_con .center_img
{
	bottom:0;
	opacity:1;
	filter:alpha(opacity=100);
}

整屏滚动.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整页滚动</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">
		$(function(){
			var $screen = $('.pages_con');
			var $pages = $('.pages');
			var $len = $pages.length;
			var $h = $(window).height();
			var $points = $('.points li');
			var timer = null;

			var $nowscreen = 0;
			$pages.css({'height':$h});
			$pages.eq(0).addClass('moving');


			$points.click(function(){
				$nowscreen = $(this).index();
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				$screen.animate({'top':-$h*$nowscreen},300);
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
			})


			$(window).mousewheel(function(event,dat){
				clearTimeout(timer);
				timer = setTimeout(function(){

					if(dat==-1)
					{
						$nowscreen++;
					}
					else
					{
						$nowscreen--;
					}
					if($nowscreen<0)
					{
						$nowscreen=0;
					}

					if($nowscreen>$len-1)
					{
						$nowscreen=$len-1;
					}

					$screen.animate({'top':-$h*$nowscreen},300);
					$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');

					$points.eq($nowscreen).addClass('active').siblings().removeClass('active');

					},200)		
			})
		})
	</script>	
</head>
<body>
	<div class="pages_con">

		<div class="pages page1">
			<div class="main_con">
				<div class="left_img"><img src="images/001.png"></div>
				<div class="right_info">
				Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。	
				</div>
			</div>
		</div>

		<div class="pages page2">
			<div class="main_con">
				<div class="right_img"><img src="images/002.png"></div>
				<div class="left_info">
				2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
				</div>
			</div>			
		</div>

		<div class="pages page3">
			<div class="main_con">
				<div class="left_img"><img src="images/004.png"></div>
				<div class="right_info">
				以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。		
				</div>
			</div>			
		</div>

		<div class="pages page4">
			<div class="main_con">
				<div class="left_img"><img src="images/003.png"></div>
				<div class="right_info">
					Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
				</div>
			</div>			
		</div>

		<div class="pages page5">
			<div class="main_con">
				<div class="center_img"><img src="images/005.png"></div>		
			</div>			
		</div>
	</div>

	<ul class="points">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>

在这里插入图片描述