一、介绍
fullPage.js是一个基于jQuery的插件，他能够很方便、很轻松的制作出全屏网站，主要功能有：
1、支持鼠标滚动
2、多个回调函数
3、支持手机、平板触摸事件
4、支持CSS3动画
5、支持窗口缩放
6、窗口缩放时自动调整
7、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等。
如何获取fullPage？github地址：https://github.com/alvarotrigo/fullPage.js
fullPage.js不兼容ie67，其他的浏览器都兼容
文件大小只有7K.很小，基于MIT协议
二、使用
1、需要先引入jQuery
1、引入fullPage样式文件：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
2、引入jquery文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"><script>
3、引入这个插件，支持更多动画过渡效果：（非必须选的）
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.js"/>
4、引入fullPage.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
上面引入的这四个文件都是cdn上面的文件，可以减轻服务器的压力，提高用户访问速度
2、实现基本的效果
1、基本的页面结构
<div id="fullpage">
<div class="section">一些内容</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
<div class="section">一些内容</div>
</div>
在这个页面中包含了若干个class为section的容器，每个section我们可以称为一个页面，所有的这些页面用一个容器包裹，这个包裹的容器不能是body,我们可以用<div id="fullpage">元素作为容器，但是不是必须是这个id，默认显示第一页，就是第一个section。
2、还可以为每一个section页增加slide（幻灯片）
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
一般section是竖形滚动的，每个section中可以有一组横向滚动的slide，
3、实现基本的效果
激活fullapge效果
在页面载入完成以后
$(document).ready(function(){
$('#fullpage').fullPage(); //最外层包裹的容器上面调用fullPage()方法，方法里面可以有一些配置项
});
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>fullPage简单例子</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
<style>
.section:first-child{
background:green;
}
.section:nth-child(2){
background-color:#FFC125;
}
.section .slide{
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">这是第一屏</div>
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
<div class="section">这是第三屏</div>
<div class="section">这是第四屏</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage();
});
</script>
</body>
</html>
三、fullPage.js API
1、配置项一
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orage','gray','red'],
controlArrows:false,
})
});
①sectionsColor:
可以为每一个section设置background-color属性
②controlArrows:
定义是否通过箭头来控制slide幻灯片，默认为true，当设置为false时，幻灯片左右的箭头就会消失，在移动设备上我们可以通过滑动来操作幻灯片。
③verticalCentered:
每一页的内容是否垂直居中，默认为true,一般我们保持默认值
④resize:
字体是否随着窗口缩放而缩放，默认为false.
⑤scrollingSpeed:
滚动速度，单位是毫秒，默认是700；（对slide也有效）
⑥anchors: anchor锚 anke
定义锚链接，默认值为[],有了锚链接，用户就可以快速打开定位到某一页面，注意定义锚链接的时候，值不要和页面中任意的id或name相同，尤其是在IE浏览器，而且定义时不需要加#
锚链接会为每个section增加一个链接，显示在地址栏中
anchors:['page1','page2','page3','page4']
每一屏后面会加上#page1或着page2，例如：http://localhost:63342/fullPage.js/API/apiOne.html#page4
我们就可以通过收藏网页，定位到相应的页面，就是页面打开就是第三屏这种效果，而不是默认的第一屏，最上端
要想实现相同的效果，可以在页面中某一个section增加一个active,打开了连接之后能够直接打开第三屏，而不是默认的页面最上端，并且连接地址中也不需要带锚
例如：<div class="section active">第三屏</div>
⑦lockAnchors:
是否锁定锚链接，默认为false,如果设置为true，那么定义的锚链接，也就是anchors属性则无效，这个配置项很少使用。
anchors:['page1','page2','page3','page4'],
lockAnchors:true
这两项同时写进去的话，屏幕上下滑动，url后面没有#page1了，但是url#page3仍然能到达第三屏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>fullPage简单例子</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
<style>
.section .slide{
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">这是第一屏</div>
<div class="section">
<div class="slide">slide1</div>
<div class="slide">slide2</div>
<div class="slide">slide3</div>
<div class="slide">slide4</div>
</div>
<div class="section active">这是第三屏</div>
<div class="section">这是第四屏</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
sectionsColor:['green','orange','gray','red'],
controlArrows:false,
// verticalCentered:false,
// resize:true,
// scrollingSpeed:2000,
anchors:['page1','page2','page3','page4'],
lockAnchors:true
});
});
</script>
</body>
</html>
2、配置项二
主要是配置页面滚动动画方式
①easing:
定义页面section滚动的动画方式，默认未easeInOutCubic,如果修改此项，需要引入jquery.easings插件，或者jquery ui.
②css3:
是否使用CSS3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果。
③loopTop:
滚动到最顶部后是否连续滚动到底部，默认为false，连续滚动为跳转方式
④loopBottom:
滚动到最底部后是否连续滚动回顶部，默认为false，连续滚动为跳转方式
⑤loopHorizontal:
横向slide幻灯片是否循环滚动，默认是true，设置为false时，滚动到第一个slide时，左边箭头消失，同理滚动到最后一个slide时，右边的箭头消失。
⑥autoScrolling:
是否使用插件的滚动方式，默认为true，如果选择false,则会出现浏览器自带的滚动条，将不会按页滚动而是按照滚动条的默认行为来滚动。
⑦scrollBar:
是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条出现，页面滚动时还是按页滚动，但是滚动条的默认行为也有效。
⑧paddingTop、paddingBottom:
设置每个section顶部和底部的padding，默认都是0,一般如果我们需要设置一个固定在顶部或者底部的菜单、导航、元素等，可以使用这两个配置项。
⑨fixedElements:
固定的元素，默认为null,需要配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动。
用法：fixedElements:'#header'
#header{
position:fixed;
top:0;
right:200px;
}
然后页面中需要有一个id是header的元素，并且这个元素的样式需要固定定位。
⑩keyboardScrolling:
是否可以使用键盘方向健导航，默认为true,
⑪touchSensitivity:
在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量的，最高为100，越大则越难滑动。
⑫continuousVertical:
是否循环滚动，默认为false。如果设置为true，则页面灰循环滚动，而不像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时使用。（这个循环滚动是正常的像是下面那一屏就是最开始一屏一样，不是跳动的循环，而是把最开始那一屏排在后面，正常动画过渡过去）
⑬animateAnchor:
锚链接是否可以控制滚动动画，默认位 true，如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。（通过url#page2打开页面的时候，默认是有一个页面从下往上滑动出现的效果的，设置为false后，这个效果就没有了）
3、配置项三
①recordHistory:
是否记录历史，默认为true,可以记录页面滚动的历史，通过浏览器的前进后退来导航，注意如果设置了autoScrolling:false，那么这个配置也将被关闭，即设置为false。
②menu:
绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认位false。可以设置为惨淡的jquery选择器。
使用方法，在页面中添加菜单元素
<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active">
<a href="#page1">1section</a>
</li>
<li data-menuanchor="page2" class="active">
<a href="#page2">2section</a>
</li>
<li data-menuanchor="page3" class="active">
<a href="#page3">3section</a>
</li>
<li data-menuanchor="page4" class="active">
<a href="#page4">4section</a>
</li>
</ul>
上面标红的值都是固定格式，以及对应的anchors。
在style中把这个元素固定到顶部
#fullpageMenu{position:fixed;top:0; z-index:999;font-size:30px;}
在fullpage({})的json里面增加配置：
anchors:['page1','page2','page3','page4'],
menu:'#fullpageMenu'
必须要有anchors的配置才行
③navigation:
是否显示导航，默认为false 。如果设置为true，会显示小圆点，作为导航。
④navigationPosition:
导航小圆点的位置，可以设置为left或者right
⑤navigationTooltips:
导航小圆点的tooltips设置，默认为[],注意按照顺序设置。
eg:就是在fullpage({
navigation:true,
navigationPosition:'right',
navigationTooltips:['page1','page2','page3','page4']
});
这样页面右边就有了导航小圆点，并且摸上去的时候会提示page1page2。
⑥showActiveTooltip:
是否显示当前页面的导航的tooltip信息，默认为false，就是上面配置的导航摸上去显示的信息，如果设置为true，就是屏幕到哪一屏，哪一个导航的tooltip就是出来，不需要摸上去。
⑦slidesNavigation:
是否显示横向幻灯片的导航，默认为false。
⑧slidesNavPosition:
横向幻灯片导航的位置，默认为bottom，可以设置为top。
⑨scrollOverflow:
内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合，slimscroll插件主要用于模拟传统的浏览器滚动条。
当一个section中内容超过一个屏幕高度时，会出现一个滚动条，但是不引入slimscroll插件这个滚动条只能看，不能用。
⑩sectionSelector:
section的选择器，默认为.section。
我们<div class="section">第一屏</div>如果我们想修改这个类名，这个属性也要修改。
⑪slideSelector:
slide的选择器，默认为.slide
⑫⑬⑭⑮⑯⑰⑱⑲⑳
四、fullpage方法
1、moveSectionUp()向上滚动一页
eg:$.fn.fullpage.moveSectionDown();
2、moveSectionDown();向下滚动一页
eg:$.fn.fullpage.moveSectionDown();
3、moveTo(section,slide);滚动到第几个，第几个幻灯片，注意：页面是从1开始，而幻灯片是从0开始。
eg:$.fn.fullpage.moveTo(2,2);效果就是先动画过渡到第2个section再动画过渡到第3个slide
4、silentMoveTo(section slide):
滚动到第几页，和moveTo一样，但是没有动画效果。
5、moveSlideRight();
eg:$.fn.fullpage.moveSlideRight();前提是页面已经在slide界面了，不然不起作用
幻灯片向右滚动
6、moveSlideLeft();
幻灯片向左滚动。
7、
setAutoScrolling(boolean):动态设置autoScrolling
setLockAnchors(boolean):动态设置lockAnchors
setRecordHistory(boolean):动态设置recordHistory
setScrollingSpeed(millisecond):动态设置scrollSpeed
8、setAllowScrolling(boolean,[directions]);
添加或删除鼠标滚轮、滑动控制，第一个参数true位启用，false为禁用，后面的参数是方向，取值包括all，up，down，left，right，可以使用多个，逗号隔开。
eg:
$.fn.fullpage.setAllowScrolling(false,'down');
$.fn.fullpage.setAllowScrolling(true,'down');这样再设置一下就可以往下滚动了。
比如我们在做一个有奖问答页面，提问的问题在前面的页面有答案，当滚动到最后一页时，不希望用户载滚回前面查看答案，就可以使用这样的办法。
9、destory（type）
销毁fullpage特效，type可以不写，或者使用all，不写type，fullpage给页面添加的样式和html元素还在，如果使用all,则样式、html等全部销毁，页面恢复和不适用房fullpage相同的效果。
eg:
$.fn.fullpage.destroy();这样fullpage只留下样式了，其他都不起作用了
$.fn.fullpage.destroy('all');这样所有的样式都没有了
10、reBuild()
重新更新页面和尺寸，用于通过ajax请求后改变页面结构之后，重建效果。
11、fullpage还支持延迟加载图片和视频（lazy loading）
图片：
<img data-src="image.png">
视频：
<video>
<source data-src="video.webm" type="wideo.webm"/>
<source data-src="video.mp4" type="video/mp4"/>
</video>
主要写法是用data-src代替src属性，就可以使用延迟加载图片。
五、fullpage回调函数
1、afterLoad(anchorLink,index)
滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。
可以根据anchorLink 和index参数值的判断，触发相应的事件。
afterLoad:function(anchorLink,index){
console.log("afterLoad:anchorLink="+anchorLink+";index="+index);
}
每次进入一个页面就会触发一次这个函数，然后console输出一些东西
afterLoad:anchorLink=page1;index=1
2、onLeave(index,nextIndex,direction)
在离开一个section时，会触发一次此回调函数，接收index、nextIndex和direction三个参数
index是离开的页面的序号，从1开始计算
nextIndex是滚动到的目标页面的序号，从1开始计算
direction判断网上滚动还是往下滚动，值是up或者down
通过return false可以取消滚动
3、afterRender()
页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。
4、afterResize()
浏览器窗口尺寸改变后的回调函数
5、afterSlideLoad(anchorLink,index,slideAnchor,slideIndex);
滚动到某一幻灯片后的回调函数，与afterLoad类似，接收anchorLink,index,slideIndex,direction四个参数。
6、onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我们离开一个slide时，会触发一次此回调函数，与onLeave类似，
五、综合实例
applewatch产品四屏展示
实现步骤：
设计页面
准备文字和图片素材
按照设计实现基本的页面效果
实现动画
六、move.js
move(".section1 h1").set("margin-left","20%").end();