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 的相關方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM