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回掉函數。

　　

　　案例呢，就不展示了，相信當你學完，掌握了，也能做出來，而且是非常棒的作品哦！

　　加油！

　　(^_^)