概述
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;
}
.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);
}
<!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>
（3）实现思路：
①.mousewheel()来取得当前鼠标滚轮是向下还是向上滚动，向下滚动返回-1，向上滚动返回1
②初始化var $nowscreen = 0记录当前页面为第一页，向下滚动返回1，即$nowscreen++，反之$nowscreen--，通过$nowscreen计算要滚动的高度.animate({'top':-$h*$nowscreen},300)
③滚动到第几页，通过.eq($nowscreen).addClass('moving').siblings().removeClass('moving')增加动画效果，通过.eq($nowscreen).addClass('active').siblings().removeClass('active')激活右边小圆点
注意：
当我们快速滚动滑轮时，动画还没做完，就一次性从第一页滚动到了第四页甚至最后一页，要解决这个问题，需要实现函数节流。
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。
解决问题思路：
将$nowscreen是加是减的判断放进定时器setTimeout(function(){}，注意此时还需要在定时器前增加一句clearTimeout(timer)用来将之前生成的定时器删除掉，在一次滚动产生的多次.mousewheel在200毫秒中只保留一次
最后
以上就是粗暴翅膀为你收集整理的Web前端：常用组件4.整屏滚动4.整屏滚动的全部内容，希望文章能够帮你解决Web前端：常用组件4.整屏滚动4.整屏滚动所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复