fullPage.js 是一個基於 jQuery 的插件，它能夠很方便、很輕鬆的製作出全屏網站，主要功能有：
- 支持鼠標滾動
- 支持前進後退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 CSS3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
jQuery 兼容： jQuery 1.7+
<div id="fullpage-list">
<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="fullpage-list">
<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>
<script>
$(function(){
$('#fullpage-list').fullpage();
});
</script>
配置
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 |
字符串 |
0 |
與頂部的距離 |
|
paddingBottom |
字符串 |
0 |
與底部距離 |
|
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個參數 |
