fullpage 插件學習心得

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.插件的學習心得

插件的添加方式有兩種：

1. jquery 添加插件的方式。

    

這種調用方式實質上就是添加了一個靜態函數。

 

  2. 往 $.fn上面添加一個方法，名字就是插件的名稱。

 

this指向的是當前jquery對象。在此例中，使用插件之前必須創建一個jquery對象。

 

回過來再看fullpage.js 插件。

 

其插件使用的是第二種方式，$.fn.fullpage 必須創建 $('selector')的jquery實例才能使用fullpage方法。對於使用時的可選參數，一般情況下，插件內部有默認的參數及值。

 

其默認的參數和值，一般都會有注釋或者直接從官網上查看API文檔，參考使用。

可以使用 console.dir($.fn) 從控制台輸出，查看 $.fn 的相關方法。