fullPage.js全屏滚动插件

fullPage.js是基于JQuery的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

• 支持鼠标滚动
• 多个回调函数
• 支持手机、平板触摸事件
• 支持css3动画
• 支持窗口缩放，窗口缩放时自动调整
• 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

Github主页：https://github.com/alvarotrigo/fullPage.js

使用fullPage.js实现的一个例子（魅蓝note2页面）：http://www.dowebok.com/demo/191/

基本使用

在html文件中首先引入fullPage.js,fullPage.js需要JQuery1.6以上版本支持。

• 可以先下在文件，再引入。
• 在线引入(www.cdnjs.com)

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.css

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js

直接上代码，html代码：

<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

js代码：

$(document).ready(function() {
    $('#fullpage').fullpage();
});

fullpage()代码可以添加参数：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors:['firstPage', 'secondPage', 'thirdPage']
    });
});

上面的代码，给每一页设置锚点，下面的代码可以实现同样的功能：

<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

这里使用了data-anchor属性，同样可以为每页设置锚点。注意，data-anchor应该全局唯一。

State classes added by fullpage.js

Fullpage.js adds multiple classes in different elements to keep a record of the status of the site:

• The class active is added the current visible section and slide.

• The class active is added to the current menu element (if using the
  menu option).

• A class of the form fp-viewing-SECTION-SLIDE is added to the body
  element of the site. (eg: fp-viewing-secondPage-0) The SECTION and
  SLIDE parts will be the anchors (or indexes if no anchor is provided)
  of the current section and slide.

• The class fp-responsive is added to the body element when the
  entering in the responsive mode

• The class fp-enabled is added to the html element when fullpage.js is
  enabled. (and removed when destroyed).

• The class fp-destroyed is added to the fullpage.js container when the
  plugin is destroyed.

• To create smaller sections just use the class fp-auto-height in the
  section you want to apply it. It will then take the height defined by
  your section/slide content.

选项

continuousVertical 是否循环，与loopTop/loopButton不同，不会跳变
Anchros: 为每页设置锚点，默认是一个空数组
lockAnchors 锁住锚点
animateAnchro 访问锚点时，是否是直接进入
recordHistory 记录浏览器滚动历史，默认为true。注意，如果设置了autoScrolling:false，那么这个配置也将被关闭。
Menu 设置菜单
Navigation 是否显示导航，默认为false。如果设置为true，会显示小圆点，昨晚导航。
navigationPostion 设置小圆点的位置，可以设置为left或right。
navigationTooltips 导航小圆点的tooltips设置，默认为空数组，注意按顺序设置。
showActiveTooltip 是否显示当前页面的导航的tooltip信息，默认为false.
slideNavigation 实现显示横向幻灯片的导航，默认为false。
slideNavPosition 横向幻灯片导航的位置，默认为bottom,可以设置为top或bottom。
scrollOverflow 内容超过满屏后是否显示滚动条，默认为false。如果设置为true,则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll插件的配合。jquery.slimscroll插件主要用于模拟传统的浏览器滚动条。
sectionSelector section的选择器，默认为.section。
slideSelector slide的选择器，默认为.slide。

Method

moveSectionUp() 向上滚动一页。
moveSectionDown() 向下滚动一页。
moveTo(section, slide) 滚动到第几页，第几个幻灯片，注意页数是从1开始，幻灯片是从0开始。
slientMoveTo(section, slide) 滚动到第几页，和moveTo一样，但是没有动画效果。
moveSlideRight() 幻灯片向右滚动。
moveSlideLeft() 幻灯片向左滚动。
setAutoScrolling(boolean) 动态设置autoScrolling
setLockAnchors(boolean) 动态设置lockAnchors
setRecordHistory(boolean) 动态设置recordHistory
setScrollingSpeed(milliseconds) 动态设置scrollingSpeed
setAllowScrolling(boolean[,directions]) 添加或删除鼠标滚动控制，第一个参数true为启用，false为禁用，后面添加的参数为方向，取值包含all,up,down,left,right,可以使用多个，逗号隔开。
比如在做一个有奖问答的页面，问题信息在前面的页面有答案，当滚动到最后一页时，不希望用户滚回之前的页面查看问题答案，可以使用这个方法。
Destory(type)
销毁fullpage特效，type可以不写，或者使用all，不写type,fullpage给页面添加的样式和html元素还在，如果使用all,则样式、html等全部销毁，页面恢复到不使用fullpage的效果。
reBuild() 重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果。

回调函数

afterLoad(anchorLink, index)
滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接收anchorLink和index两个参数，anchorLink是锚链接的名称，inde是序号，从1开始计算。
onLeave(index,nextIndex,direction)
当离开一个section时，会触发一次此回调函数，接收index/nextIndex和direction3个参数，通过返回return false;可以取消滚动。
afterRender()
页面结构生成后的回调函数
afterResize()
浏览器窗口尺寸改变后的回调函数
afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滚动到某一幻灯片后的回调函数，与afterLoad类似。
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
对应onLeave函数