fullpage（jQuery全屏滾動插件）插件的使用

簡介

如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖檔或色塊做背景，再添加一些簡單的内容，顯得格外的高端大氣上檔次。比如 iPhone 5C 的介紹頁面（檢視），QQ浏覽器的官網站。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js。

fullPage.js 是一個基于 jQuery 的插件，它能夠很友善、很輕松的制作出全屏網站，主要功能有：

• 支援滑鼠滾動
• 支援前進後退和鍵盤控制
• 多個回調函數
• 支援手機、平闆觸摸事件
• 支援 CSS3 動畫
• 支援視窗縮放
• 視窗縮放時自動調整
• 可設定滾動寬度、背景顔色、滾動速度、循環選項、回調、文本對齊方式等

使用方法

1、引入檔案

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

<!-- jquery.easings.min.js 用于 easing 參數，也可以使用完整的 jQuery UI 代替，如果不需要設定 easing 參數，可去掉改檔案 -->
<script src="js/jquery.easings.min.js"></script>

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

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

2、HTML

<div id="dowebok">
    <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>      

每個 section 代表一屏，預設顯示“第一屏”，如果要指定加載頁面時顯示的“螢幕”，可以在對應的 section 加上 class=”active”，如：

<div class="section active">第三屏</div>      

同時，可以在 section 内加入 slide，如：

<div id="dowebok">
    <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

$(function(){
    $('#dowebok').fullpage();
});      

配置

1、選項

選項	類型	預設值	說明
verticalCentered	字元串	true	内容是否垂直居中
resize	布爾值	false	字型是否随着視窗縮放而縮放
slidesColor	函數	無	設定背景顔色
anchors	數組	無	定義錨連結
scrollingSpeed	整數	700	滾動速度，機關為毫秒
easing	字元串	easeInQuart	滾動動畫方式
menu	布爾值	false	綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單可以控制滾動
navigation	布爾值	false	是否顯示項目導航
navigationPosition	字元串	right	項目導航的位置，可選 left 或 right
navigationColor	字元串	#000	項目導航的顔色
navigationTooltips	數組	空	項目導航的 tip
slidesNavigation	布爾值	false	是否顯示左右滑塊的項目導航
slidesNavPosition	字元串	bottom	左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor	字元串	#fff	左右滑塊的箭頭的背景顔色
loopBottom	布爾值	false	滾動到最底部後是否滾回頂部
loopTop	布爾值	false	滾動到最頂部後是否滾底部
loopHorizontal	布爾值	true	左右滑塊是否循環滑動
autoScrolling	布爾值	true	是否使用插件的滾動方式，如果選擇 false，則會出現浏覽器自帶的滾動條
scrollOverflow	布爾值	false	内容超過滿屏後是否顯示滾動條
css3	布爾值	false	是否使用 CSS3 transforms 滾動
paddingTop	字元串	與頂部的距離
paddingBottom	字元串	與底部距離
fixedElements	字元串	無
normalScrollElements	無
keyboardScrolling	布爾值	true	是否使用鍵盤方向鍵導航
touchSensitivity	整數	5
continuousVertical	布爾值	false	是否循環滾動，與 loopTop 及 loopBottom 不相容
animateAnchor	布爾值	true
normalScrollElementTouchThreshold	整數	5

2、方法

名稱	說明
moveSectionUp()	向上滾動
moveSectionDown()	向下滾動
moveTo(section, slide)	滾動到
moveSlideRight()	slide 向右滾動
moveSlideLeft()	slide 向左滾動
setAutoScrolling()	設定頁面滾動方式，設定為 true 時自動滾動
setAllowScrolling()	添加或删除滑鼠滾輪/觸控闆控制
setKeyboardScrolling()	添加或删除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒為機關的滾動速度

3、回調函數

名稱	說明
afterLoad	滾動到某一屏後的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨連結的名稱，index 是序号，從1開始計算
onLeave	滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數：index 是離開的“頁面”的序号，從1開始計算； nextIndex 是滾動到的“頁面”的序号，從1開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender	頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數
afterSlideLoad	滾動到某一水準滑塊後的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave	某一水準滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數