Fullpage

Fullpage.js是一个基于jQuery的插件，方便制作全屏网站，主要功能有：

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

如何使用

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js“></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js”></script>

基本的页面结构

<div id="fullpage">
    <div class="section">一些内容
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
    </div>
    <div class="section">一些内容</div>
    <div class="section">一些内容</div>
    <div class="section">一些内容</div>

激活fullpage效果

<script>
    $(document).ready(function(){
        $('#fullpage').fullpage({
此处加入配置项
        });
    });
</script>

配置项（api）

sectionsColor

可以为每个section设置background-color属性。

controlArrows

定义是否通过箭头来控制slide幻灯片，默认true，如果设置为false，则箭头消失，移动设备可以滑动操作。

scrollingSpeed

滚动速度，默认为700毫秒。

anchors

锚链接默认为[]，可以快速打开定位到某个页面。

注意不要和页面中任意的id或name相同

anchors:['page1','page2','page3','page4']

<div class="section active"></div> 可以初始页面设定

loopTop

滚动到最顶部是否返回底部，默认为false

loopBottom

滚动到底部后是否返回顶部，默认为false

loopHorizontal

横向slide幻灯片是否循环滚动，默认为true

autoScrolling

是否使用fullpage的滚动方式，默认是true，如果false，则不按页滚动且出现滚动条。

scrollBar

是否含滚动条，默认为false，如果true，则出现滚动条，两种滚动方式都生效。

paddingTop和paddingBottom

设置每一个section顶部或者底部的padding，默认值为0，当我们需要设置一个固定在顶部或底部的菜单，可以设置。

fixedElements

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

fixedElements:'#header'

continuousVertical

循环滚动，默认为false，与loopTop和loopBottom区别是不跳动回去，顺滑滚动。