fullpage.js 插件的使用

前言：

    在製作個人簡歷的時候，用到了 fullpage.js 插件，現在總結一下。

簡介

fullPage.js 是一個基於jQuery的全屏滾動插件，它能夠很方便、很輕鬆的製作出全屏網站

主要功能

• 支持鼠標滾動
• 支持前進後退和鍵盤控制
• 多個回調函數
• 支持手機、平板觸摸事件
• 支持 CSS3 動畫
• 支持窗口縮放
• 窗口縮放時自動調整
• 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性

fullPage.js 支持IE8+ 及其他現代瀏覽器

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

3、JavaScript

<script>
    $(document).ready(function(){
        //無參數版
        //$("fullpage").fullpage();  
        //設置參數
        $("#fullpage").fullpage({
	    sectionsColor: ["#cda","#0088bb","#abc","#fba"],
	    anchors: ["page1","page2","page3","page4"],
	    navigation: true,
            navigationPosition: "right",
            navigationTooltips: ["首頁","個人","經歷","聯繫我"]
	 });
    });
</script>

4、配置項

• sectionsColor:  可以爲每一個section設置background-color 屬性
• controlArrows:  定義是否通過箭頭來控制slide幻燈片，默認爲true。當我們設置爲false，則幻燈片左右兩側的箭頭就會消失，在移動設備上，我們可以通過滑動來操作幻燈片。
• verticalCentered:  每一頁的內容是否垂直居中，默認爲true。一般我們保持默認值。
• resize:  字體是否隨窗口縮放而縮放，默認爲false。
• scrollingSpeed:  滾動速度，單位爲毫秒，默認爲700。
• anchors:  定義錨鏈接，默認值爲 []。有了錨鏈接，用戶就可以快速定位到某一頁面。注意定義錨鏈接的時候，值不要和頁面中任意的id或name相同，尤其是在IE瀏覽器下。而且定義時不需要加#。
• lockAnchors:  是否鎖定錨鏈接，默認爲false。如果設置爲true，那麼定義的錨鏈接，也就是anchors屬性則沒有效果。這個配置項使用的比較少。
• easing:  定義頁面section滾動的動畫方式，默認爲 easeInOutCubic，如果修改此項，需要引入 jquery.easings 插件，或者 jquery ui 。
• css3:  是否使用CSS3 transforms 來實現滾動效果，默認爲true。這個配置項可以提高支持CSS3的瀏覽器，比如移動設備等的速度，如果瀏覽器不支持CSS3，則會使用jQuery來替代CSS3實現滾動效果。
• loopTop:  滾動到最頂部後是否連續滾動到底部，默認是false。
• loopBottom: 滾動到最底部後是否連續滾動回頂部，默認爲 false。
• loopHorizontal:  橫向 slider 幻燈片是否循環滾動，默認爲true。
• autoScrolling:  是否使用插件的滾動方式，默認爲 true， 如果選擇 false，則會出現瀏覽器自帶的滾動條，將不會按頁滾動，而是按照滾動條的默認行爲來滾動。
• scrollBar:  是否包含滾動條，默認爲false，如果設置爲true，則瀏覽器自帶的滾動條出現，頁面滾動時還是按頁滾動，但是滾動條的默認行爲也有效。
• paddingTop / paddingBottom:  設置每一個section頂部和底部的padding，默認爲0。一般如果我們需要設置一個固定在頂部或者底部的菜單、導航、元素等，都可以用這兩個配置項。
• fixedElements:  固定的元素，默認爲null，需要配置一個jquery選擇器。在頁面滾動的時候， fixedElements設置的元素固定不動。
• keyboardScrolling:  是否可以使用鍵盤方向鍵導航，默認爲true。
• touchSensitivity:  在移動設備中滑動頁面的敏感性，默認爲5，是按百分比來衡量。最高爲100，越大則越難滑動。
• continuousVertical:  頁面是否循環滾動，默認爲false。如果設置爲true，則頁面會循環滾動，而不像loopTop 或 loopBottom 那樣出現跳動，注意這個屬性和 loopTop、loopBottom不兼容，不要同時設置。
• animateAnchor:  錨鏈接是否可以控制滾動動畫，默認爲true。如果設置爲false，則通過錨鏈接定位到某個頁面顯示不再有動畫效果。
• recordHistiry:  是否記錄歷史，默認爲true，可以記錄頁面滾動的歷史，通過瀏覽器的前進後退來導航。注意如果設置了 autoScrolling: false; 那麼這個配置也將被關閉，即設置爲false。
• menu:  綁定菜單，設定的相關屬性與anchors的值對應後，菜單可以控制滾動，默認爲false。可以設置爲菜單的jquery選擇器。
• navigation:  是否顯示導航，默認爲false。如果設置爲true，會顯示小圓點，作爲導航。
• navigationPosition:  導航小圓點的位置，可以設置爲 left 或者 right。
• navigationTooltips:  導航小圓點的tooltips 設置，默認爲[], 注意按照順序設置。
• showActiveTooltips:  是否顯示當前頁面的導航的tooltip信息，默認爲false。
• slidesNavigation:  是否顯示橫向幻燈片的導航，默認爲false。
• slidesNavPosition:  橫向幻燈片導航的位置，默認爲bottom， 可以設置爲 top 或 bottom。
• scrollOverflow:  內容超過滿屏後是否顯示滾動條，默認爲false。如果設置爲true，則會顯示滾動條，如果要滾動查看內容，還需要jquery.slimscroll 插件的配合。slimscroll插件主要用於模擬傳統的瀏覽器滾動條。
• sectionSelector:  section的選擇器，默認爲 .section。
• slideSelector:  slide的選擇器，默認爲 .slide。

5、方法

使用方式：$.fn.fullpage.xxx();   xxx—代表方法名稱。

• moveSectionUp():  向上滾動一頁。
• moveSectionDown():  向下滾動一頁。
• moveTo(section, slide):  滾動到第幾頁，第幾個幻燈片，注意：頁面從1開始計，而幻燈片從0開始計。
• silentMoveTo(section, slide):  滾動到第幾頁，第幾個幻燈片，和moveTo一樣，只是沒有動畫效果。
• moveSlideRight():  幻燈片向右滾動。
• moveSlideLeft():  幻燈片向左滾動。
• setAllowScrolling(boolean, [directions]):  添加或刪除鼠標滾輪/滑動控制，第一個參數true爲啓用，false爲禁用。後面的參數爲方向，取值包含all, up, down, left, right，可以使用多個，逗號分隔。（舉個實際應用場景——比如我們在做一個有獎問答的頁面，提問的問題在前面的頁面有答案，當滾動到最後一頁時，不希望用戶在滾動回之前的頁面查看答案，可以使用這樣的方法。但是，如果用戶沒填寫完就向下頁滾動，那之前未填寫部分就不能再填寫，需改進！！）
• destroy(type):  銷燬fullp特效，type可以不寫，或者可以使用all。不寫type，fullpage給頁面添加的樣式和html元素還在，如果使用all，則樣式和html等全部銷燬，頁面恢復和不使用fullpage相同的效果。
• reBuild():  重新更新頁面和尺寸，用於通過 ajax請求後改變了頁面結構之後，重建效果。

6、回調函數

• afterLoad(anchorLink, index):   滾動到某一section, 且滾動結束後，會觸發一次此回調函數，函數接收 anchorLink 和 index 兩個參數， anchorLink 是錨鏈接的名稱，index是序號，從1開始計。 我們可以根據 anchorLink 和 index參數值的判斷，觸發相應的事件。
• onLeave(index, nextIndex, direction): 在我們離開一個section時，會觸發一次此回調函數，接收 index, nextIndex, direction三個參數。
  • index  是離開的“頁面”的序號，從1開始計。
  • nextIndex是滾動到的目標“頁面”的序號，從1開始計。
  • direction 判斷往上滾動還是往下滾動，值是 up 或 down。
  • 通過 return false; 可以取消滾動。
• afterRender():  頁面結構生成後的回調函數，或者說頁面初始化完成後的回調函數。
• afterResize():  瀏覽器窗口尺寸改變後的回調函數。

詳細參考教程：慕課網，fullpage全屏插件