fullpage 全屏插件 全屏滾動效果，原生js也很好實現，主要是用 mousewheel 滑鼠滾輪滾動事件， 來判斷上滾動還是下滾動，之後設置每次滾動的高度為屏幕的高度即可。但是，雖然效果簡單，但是相容性很差，要做很多相容處理及比較麻煩啦！ fullPage.js 是一個基於 jQuery 的插 ...
fullpage 全屏插件
全屏滾動效果，原生js也很好實現，主要是用 mousewheel 滑鼠滾輪滾動事件， 來判斷上滾動還是下滾動，之後設置每次滾動的高度為屏幕的高度即可。但是，雖然效果簡單，但是相容性很差，要做很多相容處理及比較麻煩啦！
fullPage.js 是一個基於 jQuery 的插件，它能夠幫你很方便、很輕鬆的製作出全屏網站。
github 官網 https://github.com/alvarotrigo/fullPage.js
中文演示地址 http://www.dowebok.com/demo/2014/77/
主要功能有：
-支持滑鼠滾動
-支持前進後退和鍵盤控制
-多個回調函數
-支持手機、平板觸摸事件
-支持 CSS3 動畫
-支持視窗縮放
-視窗縮放時自動調整
-可設置滾動寬度、背景顏色、滾動速度、迴圈選項、回調、文本對齊方式等等
引用文件
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必須的，用於 easing 參數，也可以使用完整的 jQuery UI 代替 --> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.fullPage.js"></script>
fullpage 詳細參數
選項 類型 預設值 說明
verticalCentered 字元串 true 內容是否垂直居中
resize 布爾值 false 字體是否隨著視窗縮放而縮放
sectionColor 函數 無 設置背景顏色
anchors 數組 無 定義錨鏈接
scrollingSpeed 整數 700 滾動速度，單位為毫秒
easing 字元串 easeInQuart 滾動動畫方式
menu 布爾值 false 綁定菜單，設定的相關屬性與 anchors 的值對應後，菜單可以控制滾動 |
navigation 布爾值 false 是否顯示項目導航
navigationPosition 字元串 right 項目導航的位置，可選 left 或 right |
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
fullPage.js 方法
註意方法的使用時需要添加：$.fn.fullpage
$.fn.fullpage.moveTo(1);
名稱 說明
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個參數
