<!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.min.js"></script>
<script type="text/javascript">
$(function(){
// !!!!!增加定时器之后,出效果会比较缓慢, 应该多些耐性,
// 耗时:0.5h
// .
// 在pages_con中从上到下依次排列了五个页面. 在滚动滑轮或者点击导航点的时候切换索引,在完成切换之后增加moveing属性完成动画.
var $screen = $('.pages_con')
// var $screen = $('pages_con')
// !!!!!!!!!! 在输入变量的时候一定确定是否把引入方式填写正确.
// !!!!!!!!!! 此处浪费1.5h
var $pages = $('.pages');
// var $len = $($pages.length)
// 此处不需要$() 引导.
var $len = $pages.length;
// alert($pages)
// alert($len) 弹出5,5 个元素
// 1.此布局中,没有设置高度,需要自己获取窗口高度,然后由此来定位每次页面移动距离.
var $h = $(window).height();
// alert($h)
$pages.css({'height':$h});
// 刚开始的时候page1就要增加moving动画
$pages.eq(0).addClass('moving');
// -----滑轮事件向下滚动是-1, 用scrollBottom来衡量页数更方便些.----错误! 滚动事件只有-1和1,无所谓正负值方便与否. 更主要应该根据页数布局来衡量计算方式.
// 依次从上到下,从上到下浏览,就应该使用scrollTop.
var $nowscreen = 0;
var timer = null;
// 占据变量符.
//编辑导航点.
var $points = $('.points li');
// alert($points.length)
// 默认激活页面1的导航点.
$points.eq(0).addClass('active');
// 当发生点击导航点事件时候, 切换页面, 且切换导航点激活状态.
$points.click(function(){
$nowscreen = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$screen.animate({'top':-$h*$nowscreen},300)
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
})
$(window).mousewheel(function(event,dat){
// 此处单单添加dat不起作用, 需要增加event事件函数.
clearTimeout(timer);
// var timer = setTimeout(function(){
// 定时器需要增加var , 但是不能在每个函数内部分别设置变量.相当于有很多个变量
timer = setTimeout(function(){
//判断滚动事件
if (dat==-1||dat<-1) {
$nowscreen++;
}
// else if(dat==1){
else if(dat==1||dat>1){
$nowscreen--;
}
// 限制上方屏幕
if ($nowscreen<0){
$nowscreen=0;
}
// 限制下方屏幕
if ($nowscreen>$len-1){
$nowscreen=$len-1;
}
// document.title=$nowscreen;
// $('html body').animate({'top':-$nowscreen*$h});
// $(document).scrollTop(-$nowscreen*$h);
// 此处因为pages_con的宽高设置都为原本属性的100%, 所以挪动document和htmlbody都没有用;
// 判断滚动事件后, 切换页面, 且 切换导航点激活状态.
$screen.animate({'top':-$h*$nowscreen},300)
$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
},100)
})
})
</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></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
