fullPage.js的主要功能有：支持鼠標滾動(dòng)、支持前進(jìn)后退和鍵盤(pán)控制、多個(gè)回調函數、支持手機、平板觸摸事件、支持 CSS3 動(dòng)畫(huà)、支持窗口縮放、窗口縮放時(shí)自動(dòng)調整、可設置滾動(dòng)寬度、背景顏色、滾動(dòng)速度、循環(huán)選項、回調、文本對齊方式等等
使用說(shuō)明
1、引入插件文件
這個(gè)插件依賴(lài)于jQuery，所以你還需要下載jQuery，并且在Fullpage插件之前引入。
如果你需要自定義頁(yè)面滾動(dòng)的效果，你需要引入jquery.easings.min.js文件。
對于內容比較多的頁(yè)面，可以設置右側的滾動(dòng)條，但是默認情況下無(wú)法滾動(dòng)，你需要jquery.slimscroll.min.js文件來(lái)自定義滑條滾動(dòng)效果。
最后，如果你不想下載到項目中，您可以使用開(kāi)源項目CDN服務(wù)，Fullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js
2、編寫(xiě)HTML代碼
默認情況下，每一屏幕的代碼都需要有DIV包裹，并且設置DIV的類(lèi)名為section，默認情況下，第一個(gè)setion將作為首頁(yè)顯示在頁(yè)面上。
Some sectionSome sectionSome sectionSome section
假如你需要讓某一個(gè)section作為首頁(yè)的第一屏展示，你只需要給這個(gè)section添加一個(gè)active的類(lèi)，Fullpage會(huì )自動(dòng)優(yōu)先展示這個(gè)屏幕，例如定義下面的代碼：
Some section
Fullpage自帶左右滑動(dòng)的幻燈片，只需要在section中添加DIV元素，并且給DIV元素添加slide類(lèi)，FUllpage會(huì )自動(dòng)生成幻燈片特效，例如下面的代碼：
3、初始化Fullpage
使用jQuery的文檔加載完畢以后執行函數，初始化Fullpage插件。
$(document).ready(function() {
$('#fullpage').fullpage();
});
所有的選項設置更復雜的初始化可能看起來(lái)像這樣：
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,//綁定菜單，設定的相關(guān)屬性與anchors的值對應后，菜單可以控制滾動(dòng)，默認為false。
anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認為[]
lockAnchors: false,//是否鎖定錨鏈接，默認為false,設為true后鏈接地址不會(huì )改變
navigation: false,//是否顯示導航，默認為false
navigationPosition: 'right',//導航小圓點(diǎn)的位置
navigationTooltips: ['firstSlide', 'secondSlide'],//導航小圓點(diǎn)的提示
showActiveTooltip: false,//是否顯示當前頁(yè)面的tooltip信息
slidesNavigation: true,//是否顯示橫向幻燈片的導航，默認為false
slidesNavPosition: 'bottom',//橫向導航的位置，默認為bottom，可以設置為top或bottom
//Scrolling
css3: true,//是否使用CSS3 transforms來(lái)實(shí)現滾動(dòng)效果，默認為true
scrollingSpeed: 700,//設置滾動(dòng)速度，單位毫秒，默認700
autoScrolling: true,//是否使用插件的滾動(dòng)方式，默認為true,若為false則會(huì )出現瀏覽器自帶滾動(dòng)條
fitToSection: true,//設置是否自適應整個(gè)窗口的空間，默認值：true
scrollBar: false,//是否包含滾動(dòng)條，默認為false,若為true瀏覽器自帶滾動(dòng)條出現
easing: 'easeInOutCubic',//定義頁(yè)面section滾動(dòng)的動(dòng)畫(huà)方式，若修改此項需引入jquery.easing插件
easingcss3: 'ease',//定義頁(yè)面section滾動(dòng)的過(guò)渡效果，若修改此項需引入第三方插件
loopBottom: false,//滾動(dòng)到最低部后是否連續滾動(dòng)到頂部，默認為false
loopTop: false,//滾動(dòng)到最頂部后是否連續滾動(dòng)到底部，默認為false
loopHorizontal: true,//橫向slide幻燈片是否循環(huán)滾動(dòng)，默認為true
continuousVertical: false,//是否循環(huán)滾動(dòng)，不兼容loopTop和loopBottom選項
normalScrollElements: '#element1, .element2',//避免自動(dòng)滾動(dòng)，滾動(dòng)時(shí)的一些元素，例如百度地圖
scrollOverflow: false,//內容超過(guò)滿(mǎn)屏后是否顯示滾動(dòng)條，true則顯示滾動(dòng)條，若需滾動(dòng)查看內容還需要jquery.slimscroll插件的配合
touchSensitivity: 15,//在移動(dòng)設備中滑動(dòng)頁(yè)面的敏感性，默認為5最高100，越大越難滑動(dòng)
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,//是否可以使用鍵盤(pán)方向鍵導航，默認為true
animateAnchor: true,//錨鏈接是否可以控制滾動(dòng)動(dòng)畫(huà)，默認為true,若為false則錨鏈接定位失效
recordHistory: true,//是否記錄歷史，默認為true,瀏覽器的前進(jìn)后退可導航。若autoScrolling:false,那么這個(gè)屬性將被關(guān)閉
//Design
controlArrows: true,//定義是否通過(guò)箭頭來(lái)控制slide,默認true
verticalCentered: true,//定義每一頁(yè)的內容是否垂直居中，默認true
resize : false,//字體是否隨窗口縮放而縮放，默認false
sectionsColor : ['#ccc', '#fff'],//為每個(gè)section設置background-color屬性
paddingTop: '3em',設置每一個(gè)section頂部的padding,默認為0
paddingBottom: '10px',設置每一個(gè)section底部的padding,默認為0
fixedElements: '#header, .footer',固定元素，默認為null,需要配置一個(gè)jquery選擇器，在頁(yè)面滾動(dòng)時(shí)，fixElements設置的元素不滾動(dòng)
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',//section選擇器。默認為.section
slideSelector: '.slide',//slide選擇器，默認為.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){}
});
});