jQuery的一款插件fullpage.js,可以實現全屏滾動，非常流行的效果，兼容性IE8+ 還算不錯，使用網站有小米，等電子產品、汽車全屏滾動展示，看起來比較高大上，接下來我全面解析下此款插件！附我做的一個簡易效果，剛入博客園，不知能怎么上demo，只能截圖了！

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

$(document).ready(function(){

//常用方法

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

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

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

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

//$.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.setAllowScrolling(boolean,[directions])//添加或刪除鼠標滾輪、滑動控制，第一個參數true/false為啟用/禁用

//后面的參數為方向，取值包括all，up，down，left，right，可以使用多個，逗號分隔

//$.fn.fullpage.destroy('type')//銷毀fullpage特效，type可以不寫。或者使用all。不寫type，fullpage給頁面添加的樣式和html元素還在

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

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

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

$('#fullpage').fullpage(

{

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

//controlArrows:false//設置幻燈片是否使用箭頭來切換，false適用于手機用戶滑動使用

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

verticalCentered:true,//設置每一頁的內容是否垂直居中,默認為true

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

scrollingSpeed:700,//設置鼠標滾動速度，默認為700

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

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

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

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

css3:true,/*是否使用CSS3transforms來實現滾動效果，默認為true。這個配置項可以提高支持css3的瀏覽器，比如移動設備等的速度

，如果瀏覽器不支持css3，則會使用jQuery來代替css3實現滾動效果。*/

//loopTop:false,//滾動到最頂部后是否連續滾動到底部，默認為false。

//loopBottom:false,//滾動到最底部后是否連續滾動回頂部，默認為false，

loopHorizontal:false,//橫向slider幻燈片是否循環滾動，默認為true，

autoScrolling:true,/*默認為true，如果選擇false，則會出現瀏覽器自帶的滾動條，將不會按頁滾動

而是按照滾動條的默認行為來滾動*/

scrollBar:false,/*是否包含滾動條，默認為false，如果在設置為true，則瀏覽器自帶的滾動條出現，頁面滾動時還是按頁滾動

但是滾動條的默認行為也有效*/

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

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

fixedElements:'#header',//固定的元素，需要配置一個jquery選擇器，在頁面滾動的時候fixedElements設置的元素固定不動。

keyboardScrolling:false,//是否可以使用鍵盤方向鍵導航，默認為true

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

continuousVertical:true,/*是否循環滾動，默認為false。如果設置為true，則頁面會滾動，而不像looptop或loopbottom

那樣出現跳動，注意這個屬性和looptop、loopbottom不兼容，不能同時設置*/

animateAnchor:true,//錨鏈接時否可以控制滾動動畫，默認為true。如果設置為false，則通過錨鏈接定位到某個頁面顯示不在有動畫效果。

recordHistory:true,/*是否記錄歷史，默認為true，可以記錄頁面滾動的歷史，通過瀏覽器的前進后退來導航。注意

如果設置autoScrolling：false，那么這個配置也將被關閉，即設置為false。*/

menu:'#fullpageMenu',//綁定菜單，設置相關屬性與anchor的值對應后，菜單可以控制滾動，默認為false。可以設置為菜單的jquery的選擇器

navigation:true,//是否顯示導航，默認為false。如果設置為true，則會顯示小圓點，作為導航

navigationPosition:'right',//設置小圓點的位置，可以設置為left或者right

navigationTooltips:['第一頁','第二頁','第三頁','第四頁'],//導航小圓點的tooltips設置，也就是指向小圓點時的提示，默認為[]，注意按照順序設置

showActiveTooltip:false,//是否顯示當前頁面的導航的tooltip信息，無需鼠標指向小圓點，默認為false

slidesNavigation:true,//是否顯示橫向幻燈片的導航，也就是是否顯示幻燈片的小圓點，默認為false。

slidesNavPosition:'top',//橫向幻燈片導航（小圓點）的位置，默認為bottom，可以設置為top或者是bottom。

scrollOverflow:false,/*內容超過滿屏后是否顯示滾動條，默認為false，如果設置為true，則會顯示滾動條

，如果要滾動查看內容，還需要引用jquery.slimscroll插件的配合，slimscroll插件主要用于模擬傳統的瀏覽器滾動條*/

sectionSelector:'.fp-section',//section的選擇器，默認為.section

slideSelector:'.fp-slide'//slide的選擇器，默認為.slide。

}

);

});