jQuery全屏滾動插件fullPage.js

http://www.dowebok.com/77.html

 

簡介

現在咱們常常能見到全屏網站，尤爲是國外網站。這些網站用幾幅很大的圖片或色塊作背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。好比 iPhone 5C 的介紹頁面（查看），QQ瀏覽器的官網站。若是你也但願你的網站能設計成全屏的，顯得更上檔次，你能夠試試 fullPage.js。

fullPage.js 是一個基於 jQuery 的插件，它可以很方便、很輕鬆的製做出全屏網站，主要功能有：

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

兼容性

jQuery 兼容

兼容 jQuery 1.7+。

瀏覽器兼容

IE8+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用方法

一、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<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>
二、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>
三、JavaScript

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

一、選項

選項    類型    默認值    說明
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    字符串    0    與頂部的距離
paddingBottom    字符串    0    與底部距離
fixedElements    字符串    無    
normalScrollElements        無    
keyboardScrolling    布爾值    true    是否使用鍵盤方向鍵導航
touchSensitivity    整數    5    
continuousVertical    布爾值    false    是否循環滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor    布爾值    true    
normalScrollElementTouchThreshold    整數    5    
二、方法

名稱    說明
moveSectionUp()    向上滾動
moveSectionDown()    向下滾動
moveTo(section, slide)    滾動到
moveSlideRight()    slide 向右滾動
moveSlideLeft()    slide 向左滾動
setAutoScrolling()    設置頁面滾動方式，設置爲 true 時自動滾動
setAllowScrolling()    添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling()    添加或刪除鍵盤方向鍵控制
setScrollingSpeed()    定義以毫秒爲單位的滾動速度
三、回調函數

名稱    說明
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個參數