【轉載】fullpage.js學習

參考網址：http://www.dowebok.com/77.html??上面有詳細介紹及案例展示，很不錯哦，可以先去看看demo

　　一、簡介

　　　fullPage.js?是一個基于jQuery的插件，它能夠很方便、很輕松的制作出全屏網站，主要功能有：

1.支持鼠標滾動

2.多個回調函數

3.支持手機、平板觸屏事件

4.支持css3動畫

5.支持窗口縮放

6.窗口縮放時自動調整

7.可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等

　　二、獲取方式：

github主頁：https://github.com/alvarotrigo/fullPage.js

三、兼容性及大小、版本

1.支持所有主流瀏覽器，除IE6、IE7

2.僅7kb

3.最新版本是V2.6.7

　　四、如何使用：

1、引入相關文件

css文件：jquery.fukkPage.css

jquery文件：1.6以上版本即可

easing文件：jquery.easing.js，支持更多動畫過渡效果的插件,可選的，非必須

fullPage文件：jquery.fullPage.js

注意：

可以使用cdn上的文件，而非本地文件，當部署到自己網站時，可以減輕自己服務器的壓力，提高用戶的訪問速度

可到?https://cdnjs.com?上去搜索fullPage，該網cdn上的fullPage.js版本是最新的

2、頁面的基本結構

<div id="fullpage"><div class="section"> //每一個session對應一個頁面<div class="slide">slide1</div>//可以給每個頁面加slide幻燈片<div class="slide">slide2</div><div class="slide">slide3</div></div><div class="section"><h1>這是第二屏</h1></div><div class="section">content</div>
</div>

?

3、要想激活fullpage效果，需要加入：

<script>$(document).ready(function(){$('#fullpage').fullpage();})//在加載fullpage的時候引入fullpage方法。
</script>

　　　五、配置項

　　　　1.sectionColor:

可以為每一個section設置background-color屬性。

例如：

$('#fullpage').fullpage({

sectionColor: ['green','orange','gray','red'];

});

　　　　2.controlArrows:

定義是否通過箭頭來控制slide幻燈片，默認為true。當我們設置為false，則幻燈片左右兩側的的箭頭就會消失，在移動設備上，我盟，可以通過滑動來操作幻燈片。

　　　　3.verticalCentered:

每一頁的內容是否垂直居中，默認為true。一般我們保持默認值

　　　　4.resize:

字體是否隨著窗口縮放而縮放，默認為false

　　　　5.scrollingSpeed:

滾動速度，單位為毫秒，默認為700

　　　　6.anchors:

定義錨鏈接，默認值為[]。有了錨鏈接，用戶就可以快速打開定位到某一頁面。

注意定義錨鏈接的時候，值不要和頁面中任意id或name相同，尤其是在IE瀏覽器下，而且定義時不需要加#

　　　　7.lockAnchors:

是否鎖定錨鏈接，默認為false。如果設置為true，那么定義的錨鏈接，也就是anchors屬性則沒有效果，這個配置項使用比較少

　　　　8.active：

在頁面中為某一個section添加了active之后，默認當窗口打開時會定位到此active，顯示當前頁

<div class="section active"></div>

　　　　9.easing:

定義頁面section滾動的動畫方式，默認為easeInOutCubic，如果修改此項，需要引入jquery。easings插件，或者jquery ui。

　　　　10.css3:

是否使用css3 transforms來實現滾動效果，默認為true。這個配置項可以提高支持css3的瀏覽器，比如移動設備等的速度，如果瀏覽器不支持css3，則會使用jquery來替代css3實現滾動效果。即優雅降級，使用jquery實現動畫，一般來說，它的性能不如css動畫來得快。

　　　　11.loopTop:

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

　　　　12.loopBottom：

滾動到最底部后是否連續滾動回頂部，默認為false。

　　　　13.loopHorizontal：

橫向slider幻燈片是否循環滾動，默認為true。設置為false時，在第一個slider時，沒有向左滾動的箭頭，不能向左滾動。同理，最后一個slider時，沒有向右滾動的箭頭，不能向右滾動。

　　　　14.autoScrolling：

是否使用插件的滾動方式，默認為true，如果選擇false，則會出現瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認行為來滾動。

　　　　15.scrollBar：

是否包含滾動條，默認為false，如果設置為true，則瀏覽器自帶的滾動條出現，頁面滾動時還是按頁滾動，但是滾動條的默認行為也有效。

　　　　16.paddingTop/paddingBottom：

設置每一個section頂部和底部的padding，默認都為0.一般如果我們需要設置一個固定在頂部或者底部的菜單、導航、元素等，可以使用這兩個配置項。

　　　　17.fixedElements：

固定的元素，默認為null，需要配置一個jquery選擇器。在頁面滾動的時候，fixedElements設置的元素固定不動。

?　　　18.keyboardScrolling：

是否可以使用鍵盤方向鍵導航，默認為true。

　　　　19.touchSensitivity：

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

　　　　20.continuousVertical:

　　　　是否循環滾動，默認為false。如果設置為true，則頁面會循環滾動，而不像loopTop或loopBottom那樣出現跳動，注意這個屬性和loopTop、loopBottom不兼容，不要同時設置。

　　　　21.animateAnchor：

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

　　　　22..recordHistory:

　　　　是否記錄歷史，默認為true，可以記錄頁面滾動的歷史，通過瀏覽器的前進后退來導航。注意如果設置了autoScrolling：false，那么這個配置也將被關閉，即設置為false。

　　　　23.menu：

　　　　綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動，默認為false。可以設置為菜單的jquery選擇器

　　　　24..navigation:

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

　　　　25.navigationPosition：

　　　　導航小圓點的位置，可以設置為left或right。

　　　　26.navigationTooltips:

　　　　導航小圓點的tooltips設置鼠標經過時顯示的名字，默認為[]，注意按照順序設置。

　　　　27.showActiveTooltip：

　　　　是否顯示當前頁面的導航的tooltip信息，默認為false

　　　　28.slidesNavigation：

　　　　是否顯示橫向幻燈片的導航，默認false。

　　　　29.slidesNavPosition：

　　　　橫向幻燈片導航的位置，默認為bottom，可以設置為top或bottom

　　　　30.scrollOverflow：

　　　　內容超過滿屏后是否顯示滾動條，默認為false。如果設置為true，則會顯示滾動條，如果要滾動查看內容，還需要jquery.slimscroll插件的配合。

　　　　31.slimscroll：

　　　　插件主要用于模擬傳統的瀏覽器滾動條。

　　　　32.sectionSelector：

section的選擇器，默認為.section。

　　　　33.slideSelector：

slide的選擇器，默認為.slide。

　　六、方法

　　　　1.moveSectionUp(): ?

向上滾動一頁

　　　　2.moveSectionDown():?

向下滾動一頁

　　　　3.moveTo(section,slide):

滾動到第幾頁，第幾個幻燈片，注意，頁面是1開始，而幻燈片，是從0開始。

　　　　4.slientMoveTo(section,slide):

滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。

　　　　5.moveSlideRight():

幻燈片向右滾動

　　　　6.moveSlideLeft():

幻燈片向左滾動。

　　　　7.slientMoveTo(section,slide):

滾動到第幾頁，和moveTo一樣，但是沒有動畫效果。

　　　　8.moveSlideRight():

幻燈片向右滾動

　　　　9.moveSlideLeft():

幻燈片向左滾動

　　　　10.setAutoScrolling(boolean):

動態設置autoScrolling

　　　　11.setLockAnchors(boolean):

動態設置lockAnchors

　　　　12.setRecordHistory(boolean):

動態設置recordHistory

　　　　13.setScrollingSpeed(milliseconds):

動態設置scrollingSpeed

　　　　14.setAllowScrolling(boolean,[directions]):

添加或刪除鼠標滾輪/滑動控制，第一個參數true為啟用，false為禁用，后面的參數為方向，取值包含all,up,down,left,right,可以使用多個，逗號分隔

比如我們在做一個有獎問答頁面，提問的問題在前面的頁面有答案，當滾動到最后一頁時，不希望用戶在滾動回之前的頁面查看答案，就可以使用這樣的方法。

　　　　15.destroy(type)

銷毀fullpage特效，type可以不寫，或者使用all，不寫type，fullpaga給頁面添加的樣式和html元素還在，如果使用all，則樣式、html等全部銷毀，頁面恢復和不使用fullpage相同的效果。

　　　　16.reBuild()

重新更新頁面和尺寸，用于通過ajax請求后改變了頁面結構之后，重建效果。

　　七、fullPage支持延遲加載圖片和視頻（Lazy Loading）

1.圖片：

<img daye-src="image.png">

2.視頻：

<video>

<source data-src="video.webm" type="video/webm" />

<source data-src="video.mp4" type="video/mp4" />

</video>

　　八、回調函數

　　　　1.afterLoad(anchorLink,index)

　　　　滾動到某一section，且滾動結束后，會觸發一次此回調函數，函數接受anchorLink和index兩個參數，anchorLink是錨鏈接的名稱，index是序號，從1開始計算。
　　　　我們可以根據anchorLink和index參數值的判斷，觸發相應的事件。

　　　　2.onleave(index,nextIndex,direction)

　　　　在我們離開一個section時，會觸發一次此回調函數，接受index、nextIndex和direction 3個參數：
　　　　　　index是離開的“頁面”的序號，從1開始計算；
　　　　　　nextIndex是滾動到的目標“頁面”的序號，從1開始計算；
　　　　　　direction判斷往上滾動還是往下滾動，值是up或down。
　　　　通過return false；可以取消滾動

　　　　3.afterRender()

　　　　頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數。

　　　　4.afterResize()

　　　　瀏覽器窗口尺寸改變后的回調函數

　　　　5.afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)

　　　　滾動到某一幻燈片后的回調函數，與afterLoad類似，接受anchorLink、index、slidIndex、direction4個參數。

　　　　6.onSlideLeave(anchorLink，index，slideIndex，direction，nextSlideIndex)

　　　　在我們離開一個slide時，會觸發一次此回調函數，與onLeave類似，接收anchorLink、index、slideIndex、direction4個參數

九、實現效果
　　　　.設計頁面
　　　　.準備文字和圖片素材
　　　　.按照設計實現基本的頁面效果
　　　　.實現動畫

十、Move.js

　　　　1.set()方法用于設置元素的css屬性，他帶有兩個參數：css屬性和屬性值。
　　　　2.scale()方法用于放大或壓縮元素的大小，按照提供的每一個值，將調用transform的scale方法。
　　　　3.rotate(deg)方法通過提供的數值作為參數來旋轉元素。當方法被調用的時候通過附加到元素的transform屬性上。
　　　　4.eng()方法用于Move.js代碼片段的結束，它標識動畫的結束。技術上，該方法觸發動畫的播放。該方法接受一個可選的callback回掉函數。