fullpage.js參數參考

fullpage函數里面的參數：

//Navigation
menu: false,//綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false。
anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認為[]
lockAnchors: false,//是否鎖定錨鏈接，默認為false,設為true后鏈接地址不會改變
navigation: false,//是否顯示導航，默認為false
navigationPosition: 'right',//導航小圓點的位置
navigationTooltips: ['firstSlide', 'secondSlide'],//導航小圓點的提示
showActiveTooltip: false,//是否顯示當前頁面的tooltip信息
slidesNavigation: true,//是否顯示橫向幻燈片的導航，默認為false
slidesNavPosition: 'bottom',//橫向導航的位置，默認為bottom，可以設置為top或bottom

//Scrolling
css3: true,//是否使用CSS3 transforms來實現滾動效果，默認為true
scrollingSpeed: 700,//設置滾動速度，單位毫秒，默認700
autoScrolling: true,//是否使用插件的滾動方式，默認為true,若為false則會出現瀏覽器自帶滾動條
fitToSection: true,//設置是否自適應整個窗口的空間，默認值：true
scrollBar: false,//是否包含滾動條，默認為false,若為true瀏覽器自帶滾動條出現
easing: 'easeInOutCubic',//定義頁面section滾動的動畫方式，若修改此項需引入jquery.easing插件
easingcss3: 'ease',//定義頁面section滾動的過渡效果，若修改此項需引入第三方插件
loopBottom: false,//滾動到最低部后是否連續滾動到頂部，默認為false
loopTop: false,//滾動到最頂部后是否連續滾動到底部，默認為false
loopHorizontal: true,//橫向slide幻燈片是否循環滾動，默認為true
continuousVertical: false,//是否循環滾動，不兼容loopTop和loopBottom選項
normalScrollElements: '#element1, .element2',//避免自動滾動，滾動時的一些元素，例如百度地圖
scrollOverflow: false,//內容超過滿屏后是否顯示滾動條，true則顯示滾動條，若需滾動查看內容還需要jquery.slimscroll插件的配合
touchSensitivity: 15,//在移動設備中滑動頁面的敏感性，默認為5最高100，越大越難滑動
normalScrollElementTouchThreshold: 5,

//Accessibility
keyboardScrolling: true,//是否可以使用鍵盤方向鍵導航，默認為true
animateAnchor: true,//錨鏈接是否可以控制滾動動畫，默認為true,若為false則錨鏈接定位失效
recordHistory: true,//是否記錄歷史，默認為true,瀏覽器的前進后退可導航。若autoScrolling:false,那么這個屬性將被關閉

//Design
controlArrows: true,//定義是否通過箭頭來控制slide,默認true
verticalCentered: true,//定義每一頁的內容是否垂直居中，默認true
resize : false,//字體是否隨窗口縮放而縮放，默認false
sectionsColor : ['#ccc', '#fff'],//為每個section設置background-color屬性
paddingTop: '3em',設置每一個section頂部的padding,默認為0
paddingBottom: '10px',設置每一個section底部的padding,默認為0
fixedElements: '#header, .footer',固定元素，默認為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動
responsiveWidth: 0,
responsiveHeight: 0,

//Custom selectors
sectionSelector: '.section',//section選擇器。默認為.section
slideSelector: '.slide',//slide選擇器，默認為.slide

//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}

fullpage函數里面的方法：

onLeave (index, nextIndex, direction)

滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數

• index 是離開的“頁面”的序號，從1開始計算；
• nextIndex 是滾動到的“頁面”的序號，從1開始計算；
• direction 判斷往上滾動還是往下滾動，值是 up 或 down。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 && direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滾動

你可以在onLeave 回調函數中返回false，那么將取消滾動。

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterLoad (anchorLink, index)

滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數。

• anchorLink 是錨鏈接的名稱
• index 是section的索引，從1開始計算

在沒有設置錨文本的情況下，只有使用唯一的index參數。

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

afterRender()

這個回調函數只是在生成頁面結構的時候調用。這是要用來初始化其他插件或刪除任何需要的文件准備好代碼的回調（這個插件修改DOM創建得到的結構）。

$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

這個回調函數在窗口發生大小改變的時候被調用，就在部分調整。

$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)

在沒有anchorlinks的幻燈片或幻燈片SlideIndex參數是唯一使用定義的情況下。

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' && slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑動

你可以設置回調函數onSlideLeave 返回false，那么他將阻止此次的滑動事件，就像onLeave一樣。

Fullpage方法函數

	$.fn.fullpage.moveSectionUp();//向上滾動一頁
	$.fn.fullpage.moveSectionDown();//向下滾動一頁
	$.fn.fullpage.moveTo(section,slide);//從1開始，slide從0開始
	$.fn.fullpage.silentMoveTo(section,slide);//和moveTo一樣，但是沒有滾動效果
	$.fn.fullpage.moveSlideRight();//幻燈片向右滾動
	$.fn.fullpage.moveSlideLeft();//幻燈片向左滾動
	$.fn.fullpage.setAutoScrolling(boolean);//動態設置autoScrolling
	$.fn.fullpage.setLockAnchors(boolean);//動態設置lockAnchors
	$.fn.fullpage.setRecordHistory(boolean);//動態設置recordHistory
	$.fn.fullpage.setScrollingSpeed(milliseconds);//動態設置scrollingSpeed
	$.fn.fullpage.destory(type);//銷毀fullpage,type可以不寫或者使用all
	$.fn.fullpage.reBuild();/重新更新頁面和尺寸，用於ajax請求改變頁面結構后重建效果

資源延時加載

fullpage.js提供了一種懶加載圖像，視頻和音頻元素，所以他們不會放慢您的網站加載或不必要的浪費數據傳輸。使用延遲加載時，所有這些元素只會加載時進入視口。啟用延遲加載，所有你需要做的是改變你的src屬性的data-src如下圖所示：

<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>
但是audio不可以：
<audio>
　　<source data-src="test.mp3" type="audio/mpeg"/>
</audio>