利用FullPage.js实现全屏滚动插件

<span style="font-family: Arial, Helvetica, sans-serif;">本文是我学习web前端以来的第一篇学习记录博客，本篇用于个人记录，欢迎交流以及指出错误，侵删。</span>

学习内容是慕课网的@WayneJ的FullPage.js全屏滚动插件

jQuery fullpage plugin插件

实现页面滚动，在滚动过程中可选择的通过CSS3增加动画效果

fupage.js是一个基于jQuery的插件，主要功能有：

支持鼠标滚动

多个回调函数

支持手机、平板触摸事件

支持CSS3动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

获取fullpage可以上github的主页http://github.com/alvarotrigo/fullpage.js

在html文件中引用如下文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.7/jquery.fullPage.js"></script>

可以在cdnjs官网搜索fullpage.js进行代码的复制与引用(截止这篇文章已经更新到2.7.4）

简单的测试可以在body中增加以下语句，就是4张图片组成一个页面，随着鼠标滑动上下滚动

<div id="fullpage">
<div class="section"><img src="images/1.jgp"></div>
<div class="section"><img src="images/1.jgp"></div>
<div class="section"><img src="images/3.jgp"></div>
<div class="section"><img src="images/4.jgp"></div>

</div>

在这里我需要用css设置图片为随浏览器大小而响应式变化大小，总能做到全屏显示
在css中设置

img{
max-width: 100%;
height:auto;
}

同时，对最后一个section（页）增加一个slide（幻灯片）
最后body中的demo文件为

<div id="fullpage">
<div class="section"><img src="images/1.jpg"></div>
<div class="section"><img src="images/2.jpg"></div>
<div class="section"><img src="images/3.jpg"></div>
<div class="section">
<div class="slide"><img src="images/4.jpg"></div>
<div class="slide"><img src="images/5.jpg"></div>
<div class="slide"><img src="images/6.jpg"></div>
<div class="slide"><img src="images/7.jpg"></div>
</div>

</div>

在这个demo中，我使用了7中图片分别成立了4个页面，3个幻灯片

想要激活fullpage需要再body最后增加

<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage();
});
</script>

用来启动fullpag插件

在对demo页面的测试过程中发现，因为引用的图片为16：9，在桌面宽屏浏览器中完美全屏显示，而在设备模拟器iphone6中则显示为上下空白，而图片垂直居中，接下来会研究如何适配移动手机设备。

API介绍
配置项

<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
//sectionsColor:[]
});
});

</script>

每条语句用逗号隔开

sectionColor：可以为每一个section设置backg-color属性

controlArrows：定义是否通过箭头来控制slide幻灯片，默认为true。当我们设置为false，则幻灯片左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯片。（可以在响应式布局中针对移动设备进行设置）

verrticalCentered：每一页的内容是否垂直居中，默认为true。一般我们保持默认值。

resize：字体是否随着窗口缩放而缩放，默认为false 。

scrollingSpeed：滚动速度，单位为毫秒，默认为700。

anchors：定义锚链接，默认值为[]。有了锚链接，用户就可以快速打开定位到某一页面。
注意定义锚链接的时候，值不要和页面中任意的id或name相同，尤其是在IE浏览器下。而且定义时不需要加#
锁定锚链接可在section后面加入active来指定锚链接

<div class="section active" ><img src="images/2.jpg"></div>

lockAnchors：是否锁定锚链接，默认为false。如果设置为true，那么定义的锚链接，也就是anchors属性则没有效果。这个配置项使用的比较少。

easing：定义页面section滚动的动画方式，默认为easeInOuyCubic，如果修改此项，需要引入jQuery.easings插件，或者jquery ui。

css3：是否使用CSS3 tranforms来实现滚动效果，默认为true。这个配置项可以用来提高支持CSS3的浏览器，比如移动设备等的速度，如果浏览器不支持css3，则会使用jquery来替代css3实现滚动效果

loopTop：滚动到最顶部后是否连续滚动到底部，默认为false。

loopBottom：滚动到最底部后是否连续滚动回顶部，默认为false。

loopHorizontal：横向slider幻灯片是否循环滚动，默认为true。

autoScrolling：是否使用插件的滚动方式，默认为true，如果选择false，则会出现浏览器自带的滚动条，将不会按页滚动，而是按照滚动条的默认行为来滚动。

scrollBar：是否包含滚动条，默认为false，如果设置为true，则浏览器自带的滚动条出现，页面滚动时还是按页滚动，但是滚动条的默认行为也有效

paddingTop/paddingBottom：设置每一个section顶部和底部的padding，默认都为0。一般如果我们需要设置一个固定在顶部或者地步的菜单、导航、元素等，可以使用这两个配置项。

fixedElements：固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不动。

比如设置一个header，在fullpage盒元素前在添加一个header盒元素，然后设置css样式，此时，滚动页面，header总会固定在最上方

<div id="header"> DEMO</div>

css样式为

#header{
position: fixed;
top: 0px
font-size: 50px;
}

但是在我实际测试是，body下就没有名为header的盒元素，没有找到原因

keyboardScrolling：是否可以使用键盘方向键导航，默认为true

touchSensitivity：在移动时杯中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100，越大则越难滑动。

continuousVertical：是否循环滚动，默认为false。如果设置为true，择页面会循环滚动，而不是像loopTop或loopBottom那样出现跳动，注意这个属性和loopTop、loopBottom不兼容，不要同时设置。

animateAnchor：锚链接是否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。

recordHistor
4000
y：是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。注意如果设置了autoScrolling：false，那么这个配置也将被关闭，即设置为false。

menu：绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jquery选择器。

在body下设置一个ul

<ul id="fullpageMenu">
<li data-menuanchor="page1" class="active"><a href="#page1">1</a></li>
<li data-menuanchor="page2" ><a href="#page2">1</a></li>
<li data-menuanchor="page3" ><a href="#page3">1</a></li>
<li data-menuanchor="page4" ><a href="#page4">1</a></li>
</ul>

设置样式属性

#fullpageMenu{
font-size: 50px;
position: fixed;
top: 0px;
z-index:999;
}

在html尾部的启动中，同时设置锚链接

<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
anchors:["page1","page2","page3","page4"]
menu:"#fullpageMenu"
});
});

最后根据自己的需要改变菜单的样式

navigation：是否显示导航，默认为false。如果设置为true，会显示小圆点，作为导航。

navigationPosition：导航小圆点的位置，可以设置为left或者right。

navigationTooltips：导航小圆点的tooltips设置，默认为[]，注意按照顺序设置

<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
navigation:true,
navigationPosition:"right",
navigationTooltips:["page1","page2","page3","page4"]
});
});

showActiveTooltip：是否显示当前页面的tooltip信息，默认为false

slidesNavigation：是否显示横向幻灯片的导航，默认为false。位置可设置为“top”

slidesNavPosition：横向幻灯片导航的位置，默认为bottom，可以设置为top货bottom。

scrollOverflow：内容超过满屏后是否显示滚动条，默认为false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要去cdsn复制插件地址添加到html中jquery.slimscroll插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。

sectionSelector：section的选择器，默认为.section。

slideSelector：slide的选择器，默认为.slide。

方法

方法的使用是

$.fn.fullpage.xxx()

moveSection():向上滚动一页。

moveSectionDown（）：向下滚动一页

moveTo（section，slide）：滚动到第几页，第几个幻灯片，注意，页面是从1开始，而幻灯片，是从0开始。

silentMoveTo（section，slide）：滚动到第几页，和moveTo一样，但是没有动画效果。

moveSlideRight（）：幻灯片向右滚动。

moveSlideLeft（）：幻灯片向左滚动。

延迟加载图片或者视频

<img data-src="image.png">
<video>
<source data-src="video.mp4" type="video/mp4"/>
</video>

回调函数

afterLoad（anchorLink，index）滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，index是序号，从1开始计算。

我们可以根据anchorLink和index参数值的判断，触发相应的事件。

onLeave（index，nextIndex，direction）

在我们离开一个section时，会触发一次此回调函数，接收index、nextIndex和direction3个参数：

index是离开的 页面 的序号，从1开始计算。

nextIndex是滚动到的目标 页面 的序号，从1开始计算；

direction判断往上滚动还是往下滚动，值是up或down。

通过return false；可以取消滚动

afterRender（）页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。

afterResize（）浏览器窗口尺寸改变后的回调函数。

基本网页结构