Fullpage

Fullpage.js是一個基于jQuery的插件，方便制作全屏網(wǎng)站，主要功能有：

• 支持鼠標(biāo)滾動
• 多個回調(diào)函數(shù)
• 支持手機(jī)平板的觸摸事件
• 支持CSS3的動畫
• 支持窗口縮放
• 窗口縮放自動調(diào)整
• 可設(shè)置滾動寬度、背景顏色、滾動速度 、循環(huán)選項(xiàng)、回調(diào) 、文本對齊方式

如何使用

<link rel="stylesheet" />
<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>

基本的頁面結(jié)構(gòu)

<div id="fullpage">
    <div class="section">一些內(nèi)容
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
        <div class="slide">Slide1</div>
    </div>
    <div class="section">一些內(nèi)容</div>
    <div class="section">一些內(nèi)容</div>
    <div class="section">一些內(nèi)容</div>

激活fullpage效果

<script>
    $(document).ready(function(){
        $('#fullpage').fullpage({
此處加入配置項(xiàng)
        });
    });
</script>

配置項(xiàng)（api）

sectionsColor

可以為每個section設(shè)置background-color屬性。

controlArrows

定義是否通過箭頭來控制slide幻燈片，默認(rèn)true，如果設(shè)置為false，則箭頭消失，移動設(shè)備可以滑動操作。

scrollingSpeed

滾動速度，默認(rèn)為700毫秒。

anchors

錨鏈接默認(rèn)為[]，可以快速打開定位到某個頁面。

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

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

<div class="section active"></div> 可以初始頁面設(shè)定

loopTop

滾動到最頂部是否返回底部，默認(rèn)為false

loopBottom

滾動到底部后是否返回頂部，默認(rèn)為false

loopHorizontal

橫向slide幻燈片是否循環(huán)滾動，默認(rèn)為true

autoScrolling

是否使用fullpage的滾動方式，默認(rèn)是true，如果false，則不按頁滾動且出現(xiàn)滾動條。

scrollBar

是否含滾動條，默認(rèn)為false，如果true，則出現(xiàn)滾動條，兩種滾動方式都生效。

paddingTop和paddingBottom

設(shè)置每一個section頂部或者底部的padding，默認(rèn)值為0，當(dāng)我們需要設(shè)置一個固定在頂部或底部的菜單，可以設(shè)置。

fixedElements

固定的元素，默認(rèn)值為null，需要配置一個jQuery的選擇器。在頁面滾動的時候，選擇的元素固定不動。

fixedElements:'#header'

continuousVertical

循環(huán)滾動，默認(rèn)為false，與loopTop和loopBottom區(qū)別是不跳動回去，順滑滾動。