API sectionsColor:['green','orange','red','lime']; //設置背景顏色 可以為每一個section設置background-color屬性 controlArrows: 定義是否通過箭頭來控制slide幻燈片,預設為true,當我們設置為false,則 ...
API
-
sectionsColor:['green','orange','red','lime'];
//設置背景顏色
可以為每一個section設置background-color屬性 -
controlArrows:
定義是否通過箭頭來控制slide幻燈片,預設為true,當我們設置為false,則幻燈片左右的箭頭消失,在移動端上我們可以通過滑動來控制幻燈片 -
verticalCentered:
每一頁的內容是否垂直居中,預設為true -
resize:
字體是否隨著視窗縮放而縮放,預設為false -
scrollingSpeed:
滾動速度,單位為毫秒,預設為700 -
anchors:
定義錨鏈接,預設值是[]。有了錨鏈接,用戶可以快速打開定位到某一頁面。
註意定義錨鏈接的時候,值不要和頁面中任意的id或name相同,尤其在IE下,而且定義時不需要加# -
lockAnchors:
是否鎖定錨鏈接,預設為false,若設置為true,則定義的錨鏈接就沒有效果,使用較少 -
easing:
定義頁面section滾動的動畫方式,預設為easeInOutCubic,如果修改則需引入jquery.easings插件,或者jquery ui. -
css3:
是否使用CSS3 transforms來實現滾動效果,預設為true。可提高支持css3的瀏覽器(如移動設備等的速度),若瀏覽器不支持css3,則會使用jquery來代替css3實現滾動效果。(傳說中的優雅降級) -
loopTop:
滾動到最頂部後是否連續滾動到底部,預設false -
loopBottom:
滾動到最底部後是否連續滾動回頂部,預設false -
loopHorizontal:
橫向slide幻燈片是否迴圈滾動,預設為true -
autoScrolling:
是否使用插件的滾動方式,預設為true,變為false則會出現瀏覽器自帶的滾動條,將不會按頁滾動,而是按照滾動條的預設行為來滾動 -
scrollBar:
是否包含滾動條,預設為false。設置為true,則出現瀏覽器自帶的滾動條,頁面滾動還是按頁滾動,但滾動條的預設行為也有效 -
paddingTop/paddingBottom:
設置每一個section頂部和底部的padding,預設都是0。一般如果需要設置一個固定在頂部或者底部的菜單、導航、元素等,可以使用這兩個配置項。 -
fixedElements:
固定的元素,預設為null,需要配置一個jquery選擇器。在頁面滾動的時候,fixedElements設置的元素固定不動。 -
keyboardScrolling:
是否可以使用鍵盤方向鍵導航,預設為true。 -
touchSensitivity:
在移動設備中滑動頁面的敏感性,預設為5,是按百分比來衡量,最高為100,越大滑動越難 -
continuousVertical:
是否迴圈滾動,預設為false。如果為true,則頁面會迴圈滾動,它不會像loopTop和loopBottom那樣出現跳動。
(它和loopTop、loopBottom不相容,不要同時設置) -
animateAnchor:
錨鏈接是否可以控制滾動動畫,預設為true。若為false,則通過錨鏈接定位到某個頁面顯示不再有動畫效果。 -
recordHistory:
是否記錄歷史,預設true。可以記錄頁面滾動的歷史,通過瀏覽器的前進後退來導航。如果設置了autoScrolling:false,那麼這個配置也將被關閉。
-
menu:
綁定菜單,設定的相關屬性與anchors的值對應後,菜單可以控制滾動,預設為false。可以設置為菜單的jquery選擇器。 -
navigation:
是否顯示導航,預設false。若為true,會顯示小圓點作為導航 -
navigationPosition:
導航小圓點的位置,可以設置為left或者right。 -
navigationTooltips:
導航小圓點的tooltips設置,預設為[],註意按照順序設置。 -
showActiveTooltip:
是否顯示當前頁面的導航的tooltip信息,預設為false -
slidesNavigation:
是否顯示橫向幻燈片的導航,預設為false -
slidesNavPosition:
橫向幻燈片導航的位置,預設為bottom,可以設置為top或bottom -
scrollOverflow:
內容超過滿屏後是否顯示滾動條,預設為false.若設置為true,則會顯示滾動條,如果要滾動查看內容,還需要jquery.slimscroll插件的配合。slimscroll插件主要用於模擬傳統的瀏覽器滾動條。 -
sectionSelector:
section的選擇器,預設為.section。 -
slideSelector:
slide的選擇器,預設為.slide。
方法
-
moveSectionUp():
向上滾動一頁。 -
moveSectionDown():
向下滾動一頁。 -
moveTo(section,slide):
滾動到第幾頁,第幾個幻燈片,註意:頁面是從1開始,而幻燈片是從0開始。 -
silentMoveTo(section,slide):
滾動到第幾頁,和moveTo一樣,但沒有動畫效果。 -
moveSlideRight():
幻燈片向右滾動。 -
moveSlideLeft():
幻燈片向左滾動。 -
setAutoScrolling(boolean):動態設置autoScrolling
-
setLockAnchors(boolean):動態設置lockAnchors
-
setRecordHistory(boolean):動態設置recordHistory
-
setScrollingSpeed(milliseconds):動態設置scrollingSpeed
-
setAllowScrolling(boolean,[directions]):
添加或刪除滑鼠滾輪/滑動控制,第一個參數true為啟用,false為禁用,後面的參數為方向,取值包含:all,up,down,left,right,可以使用多個,逗號分隔。 -
destroy(type):
銷毀fullpage特效,type可以不寫,或者使用all,不寫type,fullpage給頁面添加的樣式和html元素還在,如果使用all,則樣式、html等全部銷毀,頁面恢復和不使用fullpage相同的效果。 -
reBuild():
重新更新頁面和尺寸,用於通過ajax請求後改變了頁面結構之後,重建效果。
Lazy Loading
- 圖片:
<img data-src="image.png">
- 視頻:
<video>
<source data-src="video.webm" type="video/webm"/>
<source data-src="video.mp4" type="video/mp4"/>
</video>
用data-src代替src就可以實現延遲載入圖片。
回調函數
-
afterLoad(anchorLink,index)
滾動到某一section,且滾動結束後,會觸發一次此回調函數,函數接收 anchorLink 和 index 兩個參數, anchorLink 是錨鏈接的名稱, index 是序號,從1開始計算。我們可以根據 anchorLink 和 index 參數值的判斷,觸發相應的事件。
-
onLeave(index,nextIndex,direction)
在我們離開一個 section 時,會觸發一次此回調函數,接收 index 、 nextIndex 和 direction 3個參數:index是離開的“頁面”的序號,從1開始計算; nextIndex是滾動到的目標“頁面”的序號,從1開始計算; direction判斷往上滾動還是往下滾動,值是 up 或 down。
通過return false;可以取消滾動
-
afterRender()
頁面結構生成後的回調函數,或者說頁面初始化完成後的回調函數 -
afterResize()
瀏覽器視窗尺寸改編後的回調函數 -
afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
滾動到某一幻燈片後的回調函數,與afterLoad類似。 -
onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
在我們離開一個slide時,會觸發一次此回調函數,與onLeave類似。