fullpage.js 插件的使用

前言：

    在制作个人简历的时候，用到了 fullpage.js 插件，现在总结一下。

简介

fullPage.js 是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站

主要功能

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

兼容性

fullPage.js 支持IE8+ 及其他现代浏览器

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3、JavaScript

<script>
    $(document).ready(function(){
        //无参数版
        //$("fullpage").fullpage();  
        //设置参数
        $("#fullpage").fullpage({
	    sectionsColor: ["#cda","#0088bb","#abc","#fba"],
	    anchors: ["page1","page2","page3","page4"],
	    navigation: true,
            navigationPosition: "right",
            navigationTooltips: ["首页","个人","经历","联系我"]
	 });
    });
</script>

4、配置项

• sectionsColor:  可以为每一个section设置background-color 属性
• controlArrows:  定义是否通过箭头来控制slide幻灯片，默认为true。当我们设置为false，则幻灯片左右两侧的箭头就会消失，在移动设备上，我们可以通过滑动来操作幻灯片。
• verticalCentered:  每一页的内容是否垂直居中，默认为true。一般我们保持默认值。
• resize:  字体是否随窗口缩放而缩放，默认为false。
• scrollingSpeed:  滚动速度，单位为毫秒，默认为700。
• anchors:  定义锚链接，默认值为 []。有了锚链接，用户就可以快速定位到某一页面。注意定义锚链接的时候，值不要和页面中任意的id或name相同，尤其是在IE浏览器下。而且定义时不需要加#。
• lockAnchors:  是否锁定锚链接，默认为false。如果设置为true，那么定义的锚链接，也就是anchors属性则没有效果。这个配置项使用的比较少。
• easing:  定义页面section滚动的动画方式，默认为 easeInOutCubic，如果修改此项，需要引入 jquery.easings 插件，或者 jquery ui 。
• css3:  是否使用CSS3 transforms 来实现滚动效果，默认为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设置的元素固定不动。
• keyboardScrolling:  是否可以使用键盘方向键导航，默认为true。
• touchSensitivity:  在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量。最高为100，越大则越难滑动。
• continuousVertical:  页面是否循环滚动，默认为false。如果设置为true，则页面会循环滚动，而不像loopTop 或 loopBottom 那样出现跳动，注意这个属性和 loopTop、loopBottom不兼容，不要同时设置。
• animateAnchor:  锚链接是否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页面显示不再有动画效果。
• recordHistiry:  是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。注意如果设置了 autoScrolling: false; 那么这个配置也将被关闭，即设置为false。
• menu:  绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jquery选择器。
• navigation:  是否显示导航，默认为false。如果设置为true，会显示小圆点，作为导航。
• navigationPosition:  导航小圆点的位置，可以设置为 left 或者 right。
• navigationTooltips:  导航小圆点的tooltips 设置，默认为[], 注意按照顺序设置。
• showActiveTooltips:  是否显示当前页面的导航的tooltip信息，默认为false。
• slidesNavigation:  是否显示横向幻灯片的导航，默认为false。
• slidesNavPosition:  横向幻灯片导航的位置，默认为bottom， 可以设置为 top 或 bottom。
• scrollOverflow:  内容超过满屏后是否显示滚动条，默认为false。如果设置为true，则会显示滚动条，如果要滚动查看内容，还需要jquery.slimscroll 插件的配合。slimscroll插件主要用于模拟传统的浏览器滚动条。
• sectionSelector:  section的选择器，默认为 .section。
• slideSelector:  slide的选择器，默认为 .slide。

5、方法

使用方式：$.fn.fullpage.xxx();   xxx—代表方法名称。

• moveSectionUp():  向上滚动一页。
• moveSectionDown():  向下滚动一页。
• moveTo(section, slide):  滚动到第几页，第几个幻灯片，注意：页面从1开始计，而幻灯片从0开始计。
• silentMoveTo(section, slide):  滚动到第几页，第几个幻灯片，和moveTo一样，只是没有动画效果。
• moveSlideRight():  幻灯片向右滚动。
• moveSlideLeft():  幻灯片向左滚动。
• setAllowScrolling(boolean, [directions]):  添加或删除鼠标滚轮/滑动控制，第一个参数true为启用，false为禁用。后面的参数为方向，取值包含all, up, down, left, right，可以使用多个，逗号分隔。（举个实际应用场景——比如我们在做一个有奖问答的页面，提问的问题在前面的页面有答案，当滚动到最后一页时，不希望用户在滚动回之前的页面查看答案，可以使用这样的方法。但是，如果用户没填写完就向下页滚动，那之前未填写部分就不能再填写，需改进！！）
• destroy(type):  销毁fullp特效，type可以不写，或者可以使用all。不写type，fullpage给页面添加的样式和html元素还在，如果使用all，则样式和html等全部销毁，页面恢复和不使用fullpage相同的效果。
• reBuild():  重新更新页面和尺寸，用于通过 ajax请求后改变了页面结构之后，重建效果。

6、回调函数

• afterLoad(anchorLink, index):   滚动到某一section, 且滚动结束后，会触发一次此回调函数，函数接收 anchorLink 和 index 两个参数， anchorLink 是锚链接的名称，index是序号，从1开始计。 我们可以根据 anchorLink 和 index参数值的判断，触发相应的事件。
• onLeave(index, nextIndex, direction): 在我们离开一个section时，会触发一次此回调函数，接收 index, nextIndex, direction三个参数。
  • index  是离开的“页面”的序号，从1开始计。
  • nextIndex是滚动到的目标“页面”的序号，从1开始计。
  • direction 判断往上滚动还是往下滚动，值是 up 或 down。
  • 通过 return false; 可以取消滚动。
• afterRender():  页面结构生成后的回调函数，或者说页面初始化完成后的回调函数。
• afterResize():  浏览器窗口尺寸改变后的回调函数。

详细参考教程：慕课网，fullpage全屏插件