jQuery的一款插件fullpage.js,可以實(shí)現(xiàn)全屏滾動(dòng)，非常流行的效果，兼容性IE8+ 還算不錯(cuò)，使用網(wǎng)站有小米，等電子產(chǎn)品、汽車全屏滾動(dòng)展示，看起來比較高大上，接下來我全面解析下此款插件！附我做的一個(gè)簡(jiǎn)易效果，剛?cè)氩┛蛨@，不知能怎么上demo，只能截圖了！

下面來說下它的常見用法！

$(document).ready(function(){

//常用方法

//$.fn.fullpage.moveSectionUp()//向上滾動(dòng)一頁

//$.fn.fullpage.moveSectionDown()//向下滾動(dòng)一頁

//$.fn.fullpage.moveTo(section,slide)//滾動(dòng)到第幾頁的第幾個(gè)幻燈片，注意：頁面從1開始，幻燈片從0開始

//$.fn.fullpage.silentMoveTo(section,slide)//滾動(dòng)到第幾頁的第幾個(gè)幻燈片，但是沒有動(dòng)畫效果，注意：頁面從1開始，幻燈片從0開始

//$.fn.fullpage.moveSlideRight()//幻燈片向右滾動(dòng)

//$.fn.fullpage.moveSlideLeft()//幻燈片向左滾動(dòng)

//$.fn.fullpage.setAutoScrolling(boolean)//動(dòng)態(tài)設(shè)置autoScrolling

//$.fn.fullpage.setLockAnchors(boolean)//動(dòng)態(tài)設(shè)置LockAnchors

//$.fn.fullpage.setRecordHistory(boolean)//動(dòng)態(tài)設(shè)置RecordHistory

//$.fn.fullpage.setScrollingSpeed(milliseconds)//動(dòng)態(tài)設(shè)置ScrollingSpeed

//$.fn.fullpage.setAllowScrolling(boolean,[directions])//添加或刪除鼠標(biāo)滾輪、滑動(dòng)控制，第一個(gè)參數(shù)true/false為啟用/禁用

//后面的參數(shù)為方向，取值包括all，up，down，left，right，可以使用多個(gè)，逗號(hào)分隔

//$.fn.fullpage.destroy('type')//銷毀fullpage特效，type可以不寫?；蛘呤褂胊ll。不寫type，fullpage給頁面添加的樣式和html元素還在

//如果使用all，則樣式\html等全部銷毀，頁面恢復(fù)和不使用fullpage相同的效果

//$.fn.fullpage.reBulid()//重新更新頁面和尺寸，用于通過ajax請(qǐng)求后改變了頁面結(jié)構(gòu)之后，重建效果

//頁面中添加圖片或者視頻的時(shí)候，只需要使用data-src代替src<imgdata-src="aa.jpg">

$('#fullpage').fullpage(

{

sectionsColor:['red','yellow','#ccc','black'],//設(shè)置頁面背景顏色

//controlArrows:false//設(shè)置幻燈片是否使用箭頭來切換，false適用于手機(jī)用戶滑動(dòng)使用

//controlArrowColor:'#ccc'//左右箭頭的背景顏色

verticalCentered:true,//設(shè)置每一頁的內(nèi)容是否垂直居中,默認(rèn)為true

resize:true,//字體是否隨窗口縮放而縮放，默認(rèn)為false

scrollingSpeed:700,//設(shè)置鼠標(biāo)滾動(dòng)速度，默認(rèn)為700

anchors:['page1','page2','page3','page4'],/*定義錨鏈接，默認(rèn)為[]。有了錨鏈接，用戶可以快速打開定位到某一頁面。注意定義錨鏈接時(shí)

值不要和頁面中的任意的id或name相同，尤其是在IE瀏覽器下。定義時(shí)不需要加#*/

lockAnchors:false,/*是否鎖定錨鏈接，默認(rèn)為false。如果設(shè)置為true，那么定義的錨鏈接，也就是anchors屬性則沒有效果。使用較少。*/

//easing:sessionStorage,//定義頁面section滾動(dòng)動(dòng)畫的方式，默認(rèn)為easeInOutCubic，如果修改此項(xiàng)，需要引入iquery.easings插件，或者jQueryui。

css3:true,/*是否使用CSS3transforms來實(shí)現(xiàn)滾動(dòng)效果，默認(rèn)為true。這個(gè)配置項(xiàng)可以提高支持css3的瀏覽器，比如移動(dòng)設(shè)備等的速度

，如果瀏覽器不支持css3，則會(huì)使用jQuery來代替css3實(shí)現(xiàn)滾動(dòng)效果。*/

//loopTop:false,//滾動(dòng)到最頂部后是否連續(xù)滾動(dòng)到底部，默認(rèn)為false。

//loopBottom:false,//滾動(dòng)到最底部后是否連續(xù)滾動(dòng)回頂部，默認(rèn)為false，

loopHorizontal:false,//橫向slider幻燈片是否循環(huán)滾動(dòng)，默認(rèn)為true，

autoScrolling:true,/*默認(rèn)為true，如果選擇false，則會(huì)出現(xiàn)瀏覽器自帶的滾動(dòng)條，將不會(huì)按頁滾動(dòng)

而是按照滾動(dòng)條的默認(rèn)行為來滾動(dòng)*/

scrollBar:false,/*是否包含滾動(dòng)條，默認(rèn)為false，如果在設(shè)置為true，則瀏覽器自帶的滾動(dòng)條出現(xiàn)，頁面滾動(dòng)時(shí)還是按頁滾動(dòng)

但是滾動(dòng)條的默認(rèn)行為也有效*/

paddingTop:'10px',//設(shè)置每一個(gè)section頂部的padding，默認(rèn)為0.如果需要設(shè)置一個(gè)固定在頂部或者底部的菜單，導(dǎo)航，元素等，可以使用。

paddingBottom:'10px',//設(shè)置每一個(gè)section底部的padding，默認(rèn)為0.如果需要設(shè)置一個(gè)固定在頂部或者底部的菜單，導(dǎo)航，元素等，可以使用。

fixedElements:'#header',//固定的元素，需要配置一個(gè)jquery選擇器，在頁面滾動(dòng)的時(shí)候fixedElements設(shè)置的元素固定不動(dòng)。

keyboardScrolling:false,//是否可以使用鍵盤方向鍵導(dǎo)航，默認(rèn)為true

touchSensitivity:5,//在移動(dòng)設(shè)備中滑動(dòng)頁面的敏感性，默認(rèn)為5，是按百分比來衡量，最高為100，越大則越難滑動(dòng)。

continuousVertical:true,/*是否循環(huán)滾動(dòng)，默認(rèn)為false。如果設(shè)置為true，則頁面會(huì)滾動(dòng)，而不像looptop或loopbottom

那樣出現(xiàn)跳動(dòng)，注意這個(gè)屬性和looptop、loopbottom不兼容，不能同時(shí)設(shè)置*/

animateAnchor:true,//錨鏈接時(shí)否可以控制滾動(dòng)動(dòng)畫，默認(rèn)為true。如果設(shè)置為false，則通過錨鏈接定位到某個(gè)頁面顯示不在有動(dòng)畫效果。

recordHistory:true,/*是否記錄歷史，默認(rèn)為true，可以記錄頁面滾動(dòng)的歷史，通過瀏覽器的前進(jìn)后退來導(dǎo)航。注意

如果設(shè)置autoScrolling：false，那么這個(gè)配置也將被關(guān)閉，即設(shè)置為false。*/

menu:'#fullpageMenu',//綁定菜單，設(shè)置相關(guān)屬性與anchor的值對(duì)應(yīng)后，菜單可以控制滾動(dòng)，默認(rèn)為false?？梢栽O(shè)置為菜單的jquery的選擇器

navigation:true,//是否顯示導(dǎo)航，默認(rèn)為false。如果設(shè)置為true，則會(huì)顯示小圓點(diǎn)，作為導(dǎo)航

navigationPosition:'right',//設(shè)置小圓點(diǎn)的位置，可以設(shè)置為left或者right

navigationTooltips:['第一頁','第二頁','第三頁','第四頁'],//導(dǎo)航小圓點(diǎn)的tooltips設(shè)置，也就是指向小圓點(diǎn)時(shí)的提示，默認(rèn)為[]，注意按照順序設(shè)置

showActiveTooltip:false,//是否顯示當(dāng)前頁面的導(dǎo)航的tooltip信息，無需鼠標(biāo)指向小圓點(diǎn)，默認(rèn)為false

slidesNavigation:true,//是否顯示橫向幻燈片的導(dǎo)航，也就是是否顯示幻燈片的小圓點(diǎn)，默認(rèn)為false。

slidesNavPosition:'top',//橫向幻燈片導(dǎo)航（小圓點(diǎn)）的位置，默認(rèn)為bottom，可以設(shè)置為top或者是bottom。

scrollOverflow:false,/*內(nèi)容超過滿屏后是否顯示滾動(dòng)條，默認(rèn)為false，如果設(shè)置為true，則會(huì)顯示滾動(dòng)條

，如果要滾動(dòng)查看內(nèi)容，還需要引用jquery.slimscroll插件的配合，slimscroll插件主要用于模擬傳統(tǒng)的瀏覽器滾動(dòng)條*/

sectionSelector:'.fp-section',//section的選擇器，默認(rèn)為.section

slideSelector:'.fp-slide'//slide的選擇器，默認(rèn)為.slide。

}

);

});