持鼠標滾動税娜、前進后退和鍵盤控制满粗、多個回調(diào)函數(shù)、支持手機和平板觸摸事件脓规、支持 CSS3 動畫晓猛、支持窗口縮放饿幅、窗口縮放時自動調(diào)整、可設置滾動寬度戒职、背景顏色栗恩、滾動速度、循環(huán)選項洪燥、回調(diào)磕秤、文本對齊方式
總的來說功能挺齊全的，而且使用起來也是很方便捧韵。
1.如何使用
引入文件：fullPage是基于jquery編寫的市咆，所以必須引入了jquery了，我們還需要入jquery.easings.min.js纫版，它是必須的床绪，用于 easing 參數(shù)，或者也可以使用完整的 jQuery UI 代替其弊，最后就是fullPag本身了,還有就是引入它的css文件了癞己，引入代碼如下：
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easings.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
HTML寫法:
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
<div class="section">第四屏</div>
</div>
JS寫法：
('#fullpage').fullpage();
} );
這樣寫就完成了，整屏滾動效果就出來了梭伐！
2.配置
先說幾個常用的：
頁面滑動速度：scrollingSpeed（單位：毫秒）
是否顯示導航欄：navigation （默認false）多說一句（一般的整屏滾動頁面痹雅，按開發(fā)人員意識交互增強，而按使用者交互就少糊识，所以這種整屏滾動的最后要加上導航欄绩社，否則容易使使用者迷路）。
回調(diào)函數(shù)：
conLeave -- 滾動前調(diào)用回調(diào)函數(shù)
afterLoad -- 滾動到某一屏后的回調(diào)函數(shù)
代碼：
('#fullpage').fullpage({
'navigation': true,
onLeave: function(anchorLink, index){
if(index!=1){
console.log(123);
console.log(('#nav').removeClass('top-bottom').addClass('top-top');
('.nav-search').hide();
$('#nav').removeClass('top-top').addClass('top-bottom');
}
},
});
完整補充：
1赂苗、選項
名稱 |類型| default |說明
---|---|---
verticalCentered |字符串| true |內(nèi)容是否垂直居中
verticalCentered |字符串 |true |內(nèi)容是否垂直居中
resize |布爾值 |false |字體是否隨著窗口縮放而縮放
slidesColor |函數(shù) |無 |設置背景顏色
anchors |數(shù)組 |無 |定義錨鏈接
scrollingSpeed |整數(shù) |700 |滾動速度愉耙，單位為毫秒
easing |字符串 |easeInQuart |滾動動畫方式
menu |布爾值 |false |綁定菜單，設定的相關屬性與 anchors 的值對應后拌滋，菜單可以控制滾動
navigation |布爾值 |false |是否顯示項目導航
navigationPosition |字符串 |right |項目導航的位置朴沿，可選 left 或 right
navigationColor |字符串 |#000 |項目導航的顏色
navigationTooltips |數(shù)組| 空 |項目導航的 tip
slidesNavigation |布爾值 |false |是否顯示左右滑塊的項目導航
slidesNavPosition |字符串 |bottom |左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor |字符串 |#fff |左右滑塊的箭頭的背景顏色
loopBottom |布爾值 |false |滾動到最底部后是否滾回頂部
loopTop |布爾值 |false |滾動到最頂部后是否滾底部
loopHorizontal |布爾值 |true |左右滑塊是否循環(huán)滑動
autoScrolling |布爾值 |true |是否使用插件的滾動方式，如果選擇 false赌渣，則會出現(xiàn)瀏覽器自帶的滾動條
scrollOverflow |布爾值 |false |內(nèi)容超過滿屏后是否顯示滾動條
css3 |布爾值 |false |是否使用 CSS3 transforms 滾動
paddingTop |字符串 |0 |與頂部的距離
paddingBottom |字符串| 0 |與底部距離
fixedElements |字符串 |無 |
normalScrollElements | |無 |
keyboardScrolling |布爾值 |true |是否使用鍵盤方向鍵導航
touchSensitivity |整數(shù) |5 |
continuousVertical |布爾值 |false |是否循環(huán)滾動魏铅，與 loopTop 及 loopBottom 不兼容
animateAnchor |布爾值| true |
normalScrollElementTouchThreshold |整數(shù)| 5|
2、方法
名稱 |方法
---|---|---
moveSectionUp() |向上滾動
moveSectionDown() |向下滾動
moveTo(section, slide) |滾動到
moveSlideRight() |slide 向右滾動
moveSlideLeft() slide |向左滾動
setAutoScrolling() |設置頁面滾動方式坚芜，設置為 true 時自動滾動
setAllowScrolling() |添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling() |添加或刪除鍵盤方向鍵控制
setScrollingSpeed() |定義以毫秒為單位的滾動速度
3览芳、回調(diào)函數(shù)
名稱 |方法
---|---|---
afterLoad |滾動到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個參數(shù)鸿竖，anchorLink 是錨鏈接的名稱沧竟，index 是序號，從1開始計算
onLeave |滾動前的回調(diào)函數(shù)千贯，接收 index屯仗、nextIndex 和 direction 3個參數(shù)：index 是開的“頁面”的序號搞坝，從1開始計算搔谴；nextIndex 是滾動到的“頁面”的序號，從1開始計算direction 判斷往上滾動還是往下滾動桩撮，值是 up 或 down敦第。
afterRender |頁面結構生成后的回調(diào)函數(shù)，或者說頁面初始化完成后的回調(diào)函數(shù)
afterSlideLoad |滾動到某一水平滑塊后的回調(diào)函數(shù)店量，與 afterLoad 類似芜果，接收 anchorLink、index融师、slideIndex右钾、direction 4個參數(shù)
onSlideLeave |某一水平滑塊滾動前的回調(diào)函數(shù)，與 onLeave 類似旱爆，接收 anchorLink舀射、index、slideIndex怀伦、direction 4個參數(shù)
