fullpage.js 是一個基於jquery 的插件，它能夠輕鬆的製作出高大上的全屏網站，主要功能有; 1．支持滑鼠滾動 2．支持前進後退和鍵盤控制 3．多個回調函數 4．支持 CSS3 動畫 5．可設置滾動寬度、背景顏色、滾動速度、迴圈選項、回調、文本對齊方式等等。 實現的原理： 1. 視窗大小 ...
fullpage.js 是一個基於jquery 的插件，它能夠輕鬆的製作出高大上的全屏網站，主要功能有;
1．支持滑鼠滾動
2．支持前進後退和鍵盤控制
3．多個回調函數
4．支持 CSS3 動畫
5．可設置滾動寬度、背景顏色、滾動速度、迴圈選項、回調、文本對齊方式等等。
實現的原理：
1. 視窗大小變化時，改變佈局。
2. 滑鼠wheel時，滾動。
3. jQuery Easing是在jQuery原有的動畫效果上進行了擴展，所以使用時可以根據jQuery原有的動畫函數進行擴展，使動畫看起來更流暢，比動畫勻速運動看起來效果更好。
使用方法：
1. 引入文件
引入文件時註意將jquery 插件放在fullpage插件之前。
2. HTML
Background-size 寬度、高度設置為100%，背景圖片的大小隨著相對的界面來調整。
./ 當前目錄 ../ 上一層目錄 / 根目錄
一個 session 代表一屏，預設顯示第一屏，若要指定載入頁面時顯示的屏幕，可以在對應的session加上 class=’active’.
3. JavaScript
4. Fullpage.js 配置
1．常用選項
Navigation：flase 是否顯示項目導航
navigationPosition： right 項目導航的位置 left or right
//navigtionColor： #000 項目導航的顏色
navigationTooltips：null 項目導航的提示
verticalCentered： true 內容是否垂直居中
resize：false 字體是否隨著視窗的縮放而縮放
Anchors： null 定義錨鏈接
scrollingSpeed：700 滾動速度，單位為毫秒
menu：false 綁定菜單，設定相關屬性與anchors 的值對應後，菜單可以控制滾動
sectionsColor：null 每一屏的背景色
loopTop/loopBottom：false 滾動到最頂部（底部）後是否滾回到底部（頂部）
autoScrolling：true 是否使用插件的滾動方式
scrollOverflow：false 內容超過滿屏後是否顯示滾動條
paddingTop/paddingBottom：0 與頂部（底部）的距離
keyboardScrolling：true 是否啟用鍵盤方向鍵導航
continuousVertical：false 是否迴圈滾動，與loopTop和loopBottom 不相容
2. 回調函數
afterLoad：function(anchorLink,index){} 滾動到某一屏後的回調函數，anchorLink是錨鏈接的名稱，index是序號，從1開始計算。
onLeava：function(index,nextIndex,direction){} 滾動前的回調函數，index是離開頁面的序號，從1開始計算，nextIndex是滾動到頁面的序號，從1開始計算，direction 判斷滾動的方向，up or down。
5.插件的學習心得
插件的添加方式有兩種：
- jquery 添加插件的方式。
this指向的是當前jquery對象。在此例中，使用插件之前必須創建一個jquery對象。
回過來再看fullpage.js 插件。
其插件使用的是第二種方式，$.fn.fullpage 必須創建 $('selector')的jquery實例才能使用fullpage方法。對於使用時的可選參數，一般情況下，插件內部有預設的參數及值。
其預設的參數和值，一般都會有註釋或者直接從官網上查看API文檔，參考使用。
可以使用 console.dir($.fn) 從控制台輸出，查看 $.fn 的相關方法。
