學(xué)習(xí) jQuery-fullPage.js 插件已經(jīng)兩天，參照網(wǎng)上的案例仿造了一個(gè)“魅族Note2官網(wǎng)”網(wǎng)頁(yè)，中間出了很多問(wèn)題，不過(guò)最終還是被我做出來(lái)了。主要問(wèn)題有包括：

• 內(nèi)容超出section導(dǎo)致無(wú)法全屏
• 沒(méi)有更新到最新的fullpage.js導(dǎo)致fp-auto-height不能使section高度自適應(yīng)（網(wǎng)站header和footer）
• 沒(méi)有做不同分辨率下的樣式適配（即@media），使網(wǎng)頁(yè)在不同大小的屏幕上顯示效果相差較大。

最后，使用onLeave()寫了一個(gè)控制二級(jí)網(wǎng)站頂部二級(jí)導(dǎo)航條滑動(dòng)顯示/隱藏的js動(dòng)畫。效果展示

簡(jiǎn)介

jQuery-fullPage.js 是一個(gè)用于實(shí)現(xiàn)全屏滾動(dòng)的jQuery插件，很多高端大氣的網(wǎng)頁(yè)都是使用這個(gè)插件完成的。

插件的主要功能：

• 支持鼠標(biāo)滾動(dòng)
• 支持前進(jìn)后退和鍵盤控制
• 多個(gè)回調(diào)函數(shù)
• 支持手機(jī)、平板觸摸事件
• 支持 CSS3 動(dòng)畫
• 支持窗口縮放
• 窗口縮放時(shí)自動(dòng)調(diào)整
• 可設(shè)置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項(xiàng)、回調(diào)、文本對(duì)齊方式等等

兼容性

• 瀏覽器：fullPage.js 支持 IE8+ 及其他現(xiàn)代瀏覽器
• jQuery版本：兼容 jQuery 1.7+ 版本

使用方法

引入文件

• 該插件需要jQuery庫(kù)支持，所以需要先引入jQuery庫(kù)，然后再引入fullPage.js庫(kù)

• 另外別忘了在head標(biāo)簽中引入 jquery.fullPage.css樣式文件

• 注釋的代碼屬于進(jìn)階的知識(shí)，一般情況下使用不到，大家可根據(jù)需要自行引入

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

<!-- jquery.easings.min.js 用于 easing 參數(shù)，也可以使用完整的 jQuery UI 代替，如果不需要設(shè)置 easing 參數(shù)，可去掉改文件 -->
<!-- <script src="js/jquery.easings.min.js"></script> -->

<!-- 如果 scrollOverflow 設(shè)置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 -->
<!-- <script src="js/jquery.slimscroll.min.js"></script> -->

<script src="js/jquery.fullPage.js"></script>

html代碼

<div id="fullgage">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每個(gè) section 代表一屏，默認(rèn)顯示“第一屏”，如果要指定加載頁(yè)面時(shí)顯示的“屏幕”，可以在對(duì)應(yīng)的 section 加上 class=”active”，如：

<div class="section active">

同時(shí)，可以在 section 內(nèi)加入 slide，如：

<div id="fullgage">
    <div class="section page1">第一屏</div>
    <div class="section page2">第二屏</div>
    <div class="section page3">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section page4">第四屏</div>
</div>

JavaScript代碼

$(function(){
    var $mlNav = $('.ml-nav');
    $('#fullpage').fullpage({
        navigation: true, //右側(cè)小點(diǎn)點(diǎn)導(dǎo)航
        anchors:["page1","page2","page3","page4"], //錨文本，使瀏覽器的前進(jìn)后退鍵生效，地址欄鏈接可以直接定位到內(nèi)頁(yè)（section）
    });
});

以上是最簡(jiǎn)單的fullpage初始化代碼，你也可以加入更多的選項(xiàng)，例如：

$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',

//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,

//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,

//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,

//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',

//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});

fullPage.js插件配置參數(shù)說(shuō)明

1、配置參數(shù)，可以在fullpage的方法內(nèi)使用，例如前面「 JavaScript代碼 」中的navigation:truenavigation: true

參數(shù)詳細(xì)說(shuō)明：

controlArrows

默認(rèn)值：true，決定是否使用控制箭頭向左或向右移動(dòng)幻燈片。

verticalCentered

默認(rèn)值：true，決定是否初始化后，是否垂直居中網(wǎng)頁(yè)的內(nèi)容，如果你想自定義元素的位置，那么你可以設(shè)置為false，在插件初始化后調(diào)用afterrender回調(diào)函數(shù)加載其它的腳本庫(kù)設(shè)置你網(wǎng)頁(yè)的內(nèi)容。

resize

默認(rèn)值：true，是否在窗口改變大小后，自動(dòng)調(diào)整網(wǎng)頁(yè)中字體的大小。

scrollingSpeed

默認(rèn)值：700，每個(gè)屏幕滾動(dòng)動(dòng)畫執(zhí)行的時(shí)間，時(shí)間的單位為毫秒（ms）。

sectionsColor

默認(rèn)值：none，定義每個(gè)section的CSS背景演示，例如下面的代碼：

$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

如果設(shè)置的參數(shù)不對(duì)稱，比如屏幕個(gè)數(shù)多余設(shè)置的顏色個(gè)數(shù)，那么多余的屏幕默認(rèn)沒(méi)有背景顏色，如果屏幕個(gè)數(shù)少于設(shè)置的顏色個(gè)數(shù)，那么多余的顏色將不顯示。

anchors

默認(rèn)值：[]，定義導(dǎo)航的錨文本信息例如（#example），每個(gè)導(dǎo)航文本之前用英文逗號(hào)（,）分隔，快速導(dǎo)航的錨文本URL也是使用的這個(gè)文本，瀏覽器通過(guò)此錨文本鏈接可以支持前進(jìn)和后退按鈕功能。

此選項(xiàng)的設(shè)置還可以作為用戶的書簽，當(dāng)用戶打開帶有錨文本的URL時(shí)，F(xiàn)ullpage可以自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的section屏幕或者slide幻燈片位置。

注意，如果你使用了此選項(xiàng)，那么網(wǎng)頁(yè)中不能有相同的ID，一來(lái)Fullpage插件無(wú)法準(zhǔn)確的定位到section屏幕或者slide幻燈片位置，二來(lái)這也有悖網(wǎng)頁(yè)中CSS的編寫規(guī)范。

lockAnchors

默認(rèn)值：false，確定是否在URL中的錨點(diǎn)將在插件有任何影響。你仍然可以使用錨內(nèi)部自己的函數(shù)和回調(diào)，但他們不會(huì)有任何作用，在網(wǎng)站的滾動(dòng)。如果你想把fullpage.js在URL使用錨其他插件。

注意，這樣的設(shè)置有助于了解anchors選項(xiàng)在側(cè)邊欄菜單的對(duì)應(yīng)關(guān)系，與類的元素的值。通過(guò).section它在標(biāo)記的位置。

easing

默認(rèn)值：easeInOutCubic，定義了用于垂直和水平滾動(dòng)的過(guò)渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具體的動(dòng)畫效果你可以參考 easings插件介紹 ，你也可以使用其它的動(dòng)畫插件庫(kù)。

easingcss3

默認(rèn)值：ease，定義在滾動(dòng)屏幕中使用css3:true設(shè)置的過(guò)度效果，你可以使用 CSS3 transition-timing-function 屬性 自定義多個(gè)動(dòng)畫效果，例如：linear、ease-out、……，或者使用cubic-bezier方法創(chuàng)建自定義的動(dòng)畫效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 創(chuàng)建這個(gè)。

loopTop

默認(rèn)值：false，定義屏幕滾動(dòng)到第一個(gè)后，是否循序滾動(dòng)到最后一個(gè)。

loopBottom

默認(rèn)值：false，定義屏幕滾動(dòng)到最后一個(gè)后，是否循環(huán)滾動(dòng)到第一個(gè)。

loopHorizontal

默認(rèn)值：true，定義水平的幻燈片是否循環(huán)切換。

css3

默認(rèn)值：true，確定是否使用JavaScript和CSS3轉(zhuǎn)換滾動(dòng)在切片和幻燈片。加快平板電腦和移動(dòng)設(shè)備的瀏覽器支持CSS3的運(yùn)動(dòng)有益。如果此選項(xiàng)設(shè)置為true，瀏覽器不支持CSS3，jQuery回調(diào)函數(shù)將被替代。

autoScrolling

默認(rèn)值：true，定義屏幕是否自動(dòng)滾動(dòng)，還是需要用戶觸發(fā)事件滾動(dòng)，它也影響了部分適合在平板電腦和手機(jī)瀏覽器/設(shè)備窗口。

fitToSection

默認(rèn)值：true，設(shè)置是否自適應(yīng)整個(gè)窗口的空間，以某個(gè)section的內(nèi)容為分界線，設(shè)置為true時(shí)，某個(gè)的section將填充到整個(gè)頁(yè)面，否者用戶可以停留在網(wǎng)頁(yè)的任何位置。

scrollBar

默認(rèn)值：false，定義是否使用瀏覽器默認(rèn)的滾動(dòng)條，如果使用瀏覽器默認(rèn)的滾動(dòng)條，autoScrolling配置任然生效，用戶也可以自由滾動(dòng)的網(wǎng)站與滾動(dòng)條和fullpage.js將適合的部分在屏幕滾動(dòng)時(shí)完成。

paddingTop

默認(rèn)值：0，定義每個(gè)section固定的頭部留白，例如設(shè)置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定表頭的情況下有用的。

fixedElements

默認(rèn)值：null，定義的某個(gè)元素是否在網(wǎng)頁(yè)的固定位置，元素將被關(guān)閉的插件是必要的時(shí)候，使用CSS3的選項(xiàng)保持滾動(dòng)結(jié)構(gòu)固定。它需要對(duì)這些元素的jQuery選擇器字符串。例如：fixedElements: ‘#element1, .element2’。

normalScrollElements

默認(rèn)值：null，如果你想避免自動(dòng)滾動(dòng)，滾動(dòng)時(shí)的一些元素，這是你需要使用的選項(xiàng)。（有用的地圖，滾動(dòng)div等）需要對(duì)這些元素的jQuery選擇器字符串。例如：normalScrollElements: ‘#element1, .element2’。

<span id="index">normalScrollElementTouchThreshold</span>

默認(rèn)值：5，定義了一個(gè)數(shù)字，測(cè)試HTML標(biāo)簽樹的機(jī)構(gòu)，是否在在移動(dòng)設(shè)備上支持觸摸事件。

keyboardScrolling

默認(rèn)值：true，定義是否可以通過(guò)鍵盤箭頭事件控制section的滾動(dòng)。

touchSensitivity

默認(rèn)值：5，定義了瀏覽器窗口的寬度/高度的百分比，多遠(yuǎn)的觸摸滑動(dòng)可以跳轉(zhuǎn)到下一個(gè)section / slide。

continuousVertical

默認(rèn)值：false，定義向下滾動(dòng)到最后一節(jié)是否應(yīng)該向下滾動(dòng)到第一個(gè)，如果向上滾動(dòng)的第一部分應(yīng)該滾動(dòng)到最后一個(gè)。不兼容loopTop和loopBottom選項(xiàng)。

animateAnchor

默認(rèn)值：true，定義當(dāng)網(wǎng)頁(yè)的URL中有錨文本的時(shí)候，是否幫用戶定位到對(duì)應(yīng)的section或者slide。

recordHistory

默認(rèn)值：true，定義是否將網(wǎng)頁(yè)滾動(dòng)的的狀態(tài)紀(jì)錄到瀏覽器的歷史記錄中。

當(dāng)設(shè)置為true時(shí)，每一個(gè)section/slide滾動(dòng)的狀態(tài)將紀(jì)錄到瀏覽器的歷史紀(jì)錄中，這樣的設(shè)置有利于用戶方便回退到剛才瀏覽的內(nèi)容。
當(dāng)設(shè)置為false時(shí)候，用戶的瀏覽路徑不會(huì)記錄到瀏覽器的歷史紀(jì)錄中，如果要取消這個(gè)選項(xiàng)可以使用autoScrolling:false。

menu

默認(rèn)值：false，一個(gè)選擇器可以用來(lái)指定要與滾動(dòng)互動(dòng)的導(dǎo)航菜單，有點(diǎn)類似與Bootstrap的滾動(dòng)監(jiān)聽。這樣到滾動(dòng)到某個(gè)section時(shí)，對(duì)應(yīng)的菜單會(huì)被自動(dòng)添加active類。

注意，這個(gè)選項(xiàng)不會(huì)自動(dòng)生成一個(gè)導(dǎo)航菜單，僅僅是給指定的菜單中當(dāng)前菜單項(xiàng)添加一個(gè)active活動(dòng)類。

為了讓自定義導(dǎo)航菜單和屏幕section互動(dòng)，需要給菜單添加一個(gè)HTML5的自定義屬性（data-menuanchor），需要和錨文本設(shè)置相同的內(nèi)容，例如下面的示例代碼：

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

注意：注意這個(gè)自定義的菜單代碼應(yīng)該放置到插件設(shè)置的內(nèi)容外面，避免因?yàn)榕虐娌患嫒輪?wèn)題可以使用css3:true，否則將被附加到body的插件本身。

navigation

默認(rèn)值：false，如果設(shè)置為true，那他將會(huì)顯示一個(gè)小圓圈組成的快速導(dǎo)航欄。

navigationPosition

默認(rèn)值：none，結(jié)合參數(shù)navigation一起使用，用于設(shè)置navigation定義的菜單顯示的位置，可以設(shè)置為left/right。

navigationTooltips

默認(rèn)值：[]，定義當(dāng)navigation設(shè)置為true的時(shí)候，鼠標(biāo)移動(dòng)到快速導(dǎo)航上面的提示文本，每個(gè)屬性中間用英文半角逗號(hào)（,）隔開。

showActiveTooltip

默認(rèn)值：false，設(shè)置是否自動(dòng)顯示navigationTooltips中設(shè)置的工具提示文本。

slidesNavigation

默認(rèn)值：false，使用方法同navigation，不過(guò)這個(gè)參數(shù)設(shè)置的導(dǎo)航顯示位置不同，而且這個(gè)是用戶設(shè)置幻燈片的。

slidesNavPosition

默認(rèn)值：bottom，定義slidesNavigation中設(shè)置的導(dǎo)航菜單顯示的位置，可選的設(shè)置值為top/bottom，你可能要修改CSS樣式確定的距離從頂部或底部以及任何其他風(fēng)格如顏色。

scrollOverflow

默認(rèn)值：false，設(shè)置當(dāng)內(nèi)容超過(guò)屏幕的高度的時(shí)候，是否裁切多余的內(nèi)容。

當(dāng)設(shè)置為true時(shí)，你的內(nèi)容將會(huì)被自動(dòng)裁切，可以考慮當(dāng)afterRender回調(diào)函數(shù)調(diào)用的時(shí)候，處理你的內(nèi)容的多少或者使用其它的插件庫(kù)合理的處理多余的內(nèi)容。
當(dāng)設(shè)置為false時(shí)，插件不會(huì)自動(dòng)裁切多余的內(nèi)容，但是剩下沒(méi)有顯示的內(nèi)容任然不能顯示，此時(shí)，你可以使用 jquery.slimscroll.min插件來(lái)自定義滾動(dòng)事件，如果要使用這個(gè)插件，應(yīng)該在Fullpage插件之前引入，例如下面的代碼：

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

sectionSelector

默認(rèn)值：.section，定義用于選擇全屏滾動(dòng)內(nèi)容的jQuery選擇器。它可能需要改變，有時(shí)為了避免與其他插件使用相同的選擇器作為整版的問(wèn)題。

slideSelector

默認(rèn)值：.slide，定義用于插件幻燈片jQuery選擇器。它可能需要改變，有時(shí)為了避免與其他插件使用相同的選擇器fullpage.js問(wèn)題。

responsiveWidth

默認(rèn)值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默認(rèn)值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.

fullPage.js插件方法函數(shù)

插件方法使用說(shuō)明

moveSectionUp()

設(shè)置section向上滾動(dòng)

$.fn.fullpage.moveSectionUp();

moveSectionDown()

設(shè)置section向下滾動(dòng)

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

設(shè)置屏幕滾動(dòng)到某個(gè)section或者slide，兩個(gè)參數(shù)都是某個(gè)內(nèi)容塊的索引值或者是錨文本，默認(rèn)情況下slide的索引被設(shè)置為0。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
 
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
 
//Which is the same as
$.fn.fullpage.moveTo(3);

silentMoveTo(section, slide)

這個(gè)函數(shù)的用法和MoveTo方法完全一樣，只是MoveTo在切換的時(shí)候有動(dòng)畫效果，而silentMoveTo方法在切換的時(shí)候沒(méi)有動(dòng)畫效果，直接跳轉(zhuǎn)到對(duì)應(yīng)的section中。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);

moveSlideRight()

設(shè)置幻燈片向右滑動(dòng)，將下一個(gè)幻燈片顯示在當(dāng)前的屏幕中。

$.fn.fullpage.moveSlideRight();

moveSlideLeft()

設(shè)置幻燈片向左滑動(dòng)，將上一個(gè)幻燈片顯示在當(dāng)前的屏幕中。

$.fn.fullpage.moveSlideLeft();

setAutoScrolling(boolean)

可以實(shí)時(shí)的控制頁(yè)面滾動(dòng)的方式，可選的參數(shù)false/true。

• 如果參數(shù)被設(shè)置為true，所有的section將自動(dòng)滾動(dòng)。
• 如果參數(shù)被設(shè)置為false，所有的section將不會(huì)自動(dòng)滾動(dòng)，需要用戶手動(dòng)或者使用瀏覽器的滑條滾動(dòng)網(wǎng)頁(yè)。

注意，scrollOverflow參數(shù)如果設(shè)置為true，它可能很難滾動(dòng)鼠標(biāo)滾輪或觸摸板當(dāng)部分滾動(dòng).

$.fn.fullpage.setAutoScrolling(false);

setFitToSection(boolean)

該函數(shù)設(shè)置選項(xiàng)fitToSection確定是否自適應(yīng)section在屏幕上。

$.fn.fullpage.setFitToSection(false);

setLockAnchors(boolean)

設(shè)置選項(xiàng)lockAnchors確定將錨文本鎖定到URL中。

$.fn.fullpage.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自動(dòng)綁定的鼠標(biāo)滑輪和移動(dòng)觸摸事件，不過(guò)用戶任然可以通過(guò)鍵盤和點(diǎn)擊快速導(dǎo)航的方式切換section/slide。要取消鍵盤事件你應(yīng)該使用setKeyboardScrolling方法。

• directions，可選參數(shù)，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)，例如down, right，他設(shè)置的兩個(gè)方向上將禁止或者激活滾動(dòng)。

//disabling scrolling
`$.fn.fullpage.setAllowScrolling(false);` 

//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');
 
//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

添加或者禁止鍵盤對(duì)section/slide的控制，這個(gè)事件是默認(rèn)綁定的。

• directions，可選參數(shù)，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)，例如down, right，他設(shè)置的兩個(gè)方向上將禁止或者激活鍵盤的滾動(dòng)。

//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);
 
//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');
 
//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

定義是否為每個(gè)URL的變更紀(jì)錄到瀏覽器中的歷史記錄中。

$.fn.fullpage.setRecordHistory(false);

setScrollingSpeed(milliseconds)

定義每個(gè)section/slide滾動(dòng)的時(shí)間，默認(rèn)的時(shí)間單位為毫秒（ms）。

$.fn.fullpage.setScrollingSpeed(700);

destroy(type)

移除Fullpage的事件和添加的HTML/CSS樣式風(fēng)格，理想的使用在使用Ajax加載內(nèi)容。

• type：可以被設(shè)置為空字符，或者all，如果一旦執(zhí)行，通過(guò)Fullpage添加的HTML/CSS樣式和代碼都將會(huì)被移除，將顯示沒(méi)有使用Fullpage的樣式，一個(gè)使用過(guò)任何插件進(jìn)行修改。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
 
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

reBuild()

更新DOM結(jié)構(gòu)以適應(yīng)新的窗口大小或其內(nèi)容。理想的使用與Ajax調(diào)用或外部網(wǎng)站的DOM結(jié)構(gòu)的變化組合。

$.fn.fullpage.reBuild();

資源延時(shí)加載

fullpage.js提供了一種懶加載圖像，視頻和音頻元素，所以他們不會(huì)放慢您的網(wǎng)站加載或不必要的浪費(fèi)數(shù)據(jù)傳輸。使用延遲加載時(shí)，所有這些元素只會(huì)加載時(shí)進(jìn)入視口。啟用延遲加載，所有你需要做的是改變你的src屬性的data-src如下圖所示：

![](image.png)
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>

fullPage.js插件回調(diào)函數(shù)

3、函數(shù)

插件回調(diào)函數(shù)使用說(shuō)明

afterLoad (anchorLink, index)

滾動(dòng)到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個(gè)參數(shù)。

• anchorLink 是錨鏈接的名稱
• index 是section的索引，從1開始計(jì)算

在沒(méi)有設(shè)置錨文本的情況下，只有使用唯一的index參數(shù)。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

<span id="onLeave">onLeave (index, nextIndex, direction)</span>

滾動(dòng)前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個(gè)參數(shù)

• index 是離開的“頁(yè)面”的序號(hào)，從1開始計(jì)算；
• nextIndex 是滾動(dòng)到的“頁(yè)面”的序號(hào)，從1開始計(jì)算；
• direction 判斷往上滾動(dòng)還是往下滾動(dòng)，值是 up 或 down。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滾動(dòng)

你可以在onLeave 回調(diào)函數(shù)中返回false，那么將取消滾動(dòng)。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterRender()

這個(gè)回調(diào)函數(shù)只是在生成頁(yè)面結(jié)構(gòu)的時(shí)候調(diào)用。這是要用來(lái)初始化其他插件或刪除任何需要的文件準(zhǔn)備好代碼的回調(diào)（這個(gè)插件修改DOM創(chuàng)建得到的結(jié)構(gòu)）。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

這個(gè)回調(diào)函數(shù)在窗口發(fā)生大小改變的時(shí)候被調(diào)用，就在部分調(diào)整。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滾動(dòng)到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù)。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)
  在沒(méi)有anchorlinks的幻燈片或幻燈片SlideIndex參數(shù)是唯一使用定義的情況下。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑塊滾動(dòng)前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個(gè)參數(shù)。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑動(dòng)

你可以設(shè)置回調(diào)函數(shù)onSlideLeave 返回false，那么他將阻止此次的滑動(dòng)事件，就像onLeave一樣。

常見(jiàn)問(wèn)題

能否自定義某個(gè)Section的高度？
這個(gè)需求一般出現(xiàn)在頁(yè)面的頂部或者是底部，默認(rèn)情況下，一個(gè)Section的內(nèi)容會(huì)自動(dòng)填充整個(gè)屏幕，如果你想要某個(gè)Section自適應(yīng)內(nèi)容的高度，你可以給它添加一個(gè)fp-auto-height類，例如下面的示例代碼。

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>
JavaScript代碼無(wú)需修改，F(xiàn)ullpage會(huì)自動(dòng)獲取這個(gè)高度并設(shè)置給元素。

滑動(dòng)卡頓不流暢？
滑動(dòng)卡頓不流暢，這個(gè)問(wèn)題可能跟硬件有關(guān)，F(xiàn)ullpage可以支持JS動(dòng)畫和CSS動(dòng)畫，而據(jù)我觀察JS動(dòng)畫總是有些卡，而CSS動(dòng)畫就很流暢，可能跟瀏覽器硬件平臺(tái)有關(guān)系，所以盡量選擇CSS動(dòng)畫作為頁(yè)面過(guò)度的動(dòng)畫效果。

還有一點(diǎn)Fullpage默認(rèn)綁定了鼠標(biāo)的滑輪和鍵盤的上下左右鍵，當(dāng)一個(gè)動(dòng)畫未執(zhí)行完成時(shí)，再操作這個(gè)按鍵是無(wú)效的，F(xiàn)ullpage動(dòng)畫不會(huì)疊加在一起執(zhí)行，這也是比較合乎邏輯的。

無(wú)法全屏（屏幕底部可以看到下一屏幕的內(nèi)容）？
1、檢查每個(gè)section的內(nèi)容時(shí)候有超出屏幕的，特別是使用了絕對(duì)定位，檢查top、left、bottom、top設(shè)置的值時(shí)候讓內(nèi)容超出了當(dāng)前的section。

2、檢查靠邊（上下左右）元素的line-height是否為0，可以將line-height:0;設(shè)置為0看看時(shí)候解決問(wèn)題。

3、另外，可以通過(guò)逐個(gè)將section的代碼注釋的方法，找到有問(wèn)題的section，從而縮小問(wèn)題的范圍。

設(shè)置了fp-auto-height為何不生效？
很可能是你的fullpage不是最新版的，建議到作者的github上直接下載或使用git克隆下來(lái)。fullpage官網(wǎng)github地址

不同分辨率的屏幕顯示效果不同？
解決這更替，可以通過(guò)@media指定不同屏幕下的樣式。例如：

@media screen and (min-width:1920px) {
    .page1 { background: url(../images/bg1.jpg) center 0 no-repeat;}
    .page2 { background: url(../images/bg2.jpg) center 0 no-repeat;}
    .page3 { background: url(../images/bg3.jpg) center 0 no-repeat;}
    .page4 { background: url(../images/bg4.jpg) center 0 no-repeat;}
    .page5 { background: url(../images/bg5.jpg) center 0 no-repeat;}
    /*.page6 { background: url(../images/bg6.jpg) center 0 no-repeat;}*/
    .page7 { background: url(../images/bg7.jpg) center 0 no-repeat;}
    .page9 { background: url(../images/bg9.jpg) center 0 no-repeat;}
    
    .page2-img{
      margin-top: 100px;
      margin-left: -720px;
    }   
    省略...
}
@media screen and (max-width:1440px) {
    .cnc { background: url(../images/bg3-xs.jpg) center 0 no-repeat;}
    省略...
}

Parallax doesn’t work with fullpage.js
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don’t want to use the auto-scrolling feature.

Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

jQuery scrollTop function doesn’t work
Same answer as Parallax doesn’t work with fullpage.js

jQuery scroll event doesn’t work
Same answer as Parallax doesn’t work with fullpage.js

Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.

Is it possible to hide the address bar in mobile phones on landscape
Short answer: on Apple iOS you can do that by avoid using the anchors option of fullPage.js.

Explanation: each browser acts in a different way on this matter and it is not possible right now to control the behavior of the address bar by using javascript. You can try to take a look at different meta tags.

Lazyload doesn’t work
Short answer: use the scrollBar:true option for fullPage.js. Otherwise, you can make use of the callbacks provided by fullPage.js such as onLeave, onSlideLeave, afterLoad, afterSlideLoad and afterRender to load images. One of those techniques is explained in this comment.

Explanation: Lazyload techniques , as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

My other plugins don’t work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

My javascript/jQuery events don’t work anymore when using fullPage.js
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.

How can I set fullscreen videos / backgrounds
Short answer: this has nothing to do with fullPage.js but with CSS knowledge. You should try to find your answers in Google or places such as stackoverflow.com.

Explanation: fullpage.js provides some examples with full backgrounds and full video backgrounds but it has nothing to do with the use of fullPage.js. It is all about CSS.

Fullpage.js jumps one section
Short answer: as detailed in the documentation:

Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
Explanation: there’s no way to avoid the browser’s behavior towards the use of anchors in the URL (#) when an element with the id or name attribute exists in the DOM with the exact same value.

Is it possible to scroll automatically through sections / slides?
Short answer: Yep. Check this video tutorial for the automatic vertical scroll or this topic for the horizontal one.

參考文檔

1、fullpage插件官方github地址

2、fp-auto-height屬性官方demo（底部可選擇其他demo）

3、jQuery全屏滾動(dòng)插件fullPage.js-源碼下載

4、fullPage.js制作魅藍(lán)note2頁(yè)面-實(shí)例教程

5、fullpage入門指南-超詳細(xì)教程