FullPage.js全屏滾動插件學習總結

2024-04-27 15:02:31

字體：大中小

來源：轉載

供稿：網友

如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。比如 iphone 5C 的介紹頁面（查看），QQ瀏覽器的官網站。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js

主要功能有：

支持鼠標滾動

支持前進后退和鍵盤控制

多個回調函數

支持手機、平板觸摸事件

支持 CSS3 動畫

支持窗口縮放

窗口縮放時自動調整

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

實例代碼展示

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="renderer" content="webkit">    <title>fullpage</title>    <meta name="description" content="">    <meta name="keyWords" content="">    <meta name="author" content="Jesse">    <link href="https://cdnjs.cloudflare.com/Ajax/libs/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet">    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.js"></script></head><body><!--     <ul id="fullpageMenu" style="position:fixed;top:100px;right:20px;z-index:999;">        <li data-menuanchor="page1" class="active"><a href="#page1">1</a></li>        <li data-menuanchor="page2" ><a href="#page2">2</a></li>        <li data-menuanchor="page3"><a href="#page3">3</a></li>        <li data-menuanchor="page4" ><a href="#page4">4</a></li>        <li data-menuanchor="page5" ><a href="#page5">5</a></li>    </ul> -->    <div id="header" style="position:fixed;top:20px;right:20px;font-size: 30px;color:#fff;">123</div>    <div id="fullpage">        <div class="section">section1</div>        <div class="section">section2</div>        <div class="section">            <div class="slide"> Slide 1 </div>            <div class="slide"> Slide 2 </div>            <div class="slide active"> Slide 3 </div>            <div class="slide"> Slide 4 </div>        </div>        <div class="section">section4</div>        <div class="section">section5</div>    </div>    <script>    $(document).ready(function() {        $('#fullpage').fullpage({            //配置項介紹            //sectionsColor為每個section設置background-color屬性            sectionsColor:['green','orange','gray','red','yellow'],            //controlArrows定義是否通過箭頭來控制slide,默認true            controlArrows:false,            //verticalCentered定義每一頁的內容是否垂直居中，默認true            verticalCentered:false,            //resize字體是否隨窗口縮放而縮放，默認false            resize:true,            //scrollingSpeed設置滾動速度，單位毫秒，默認700            scrollingSpeed:1000,            //anchors定義錨鏈接，默認為[],定義錨鏈接時，值不要和頁面中的任何ID或name相同，且不需要加#            anchors:['page1','page2','page3','page4','page5'],            //lockAnchors是否鎖定錨鏈接，默認為false,設為true后鏈接地址不會改變            // lockAnchors:true,            //easing定義頁面section滾動的動畫方式，默認為easeInOutCubic,若修改此項需引入jquery.easing插件            //css3是否使用CSS3 transforms來實現滾動效果，默認為true。若瀏覽器不支持CSS3，則會用Jquery來實現            //css3:false,            //loopTop滾動到最頂部后是否連續滾動到底部，默認為false            //loopBottom滾動到最低部后是否連續滾動到頂部，默認為false            //loopHorizontal橫向slide幻燈片是否循環滾動，默認為true            //autoScrolling是否使用插件的滾動方式，默認為true,若為false則會出現瀏覽器自帶滾動條                //scrollBar是否包含滾動條，默認為false,若為true瀏覽器自帶滾動條出現            //paddingTop/paddingBottom設置每一個section頂部和底部的padding,默認為0            //fixedElements固定元素，默認為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設置的元素不滾動            fixedElements:"#header",            //keyboardScrolling是否可以使用鍵盤方向鍵導航，默認為true            //touchSensitivity在移動設備中滑動頁面的敏感性，默認為5最高100，越大越難滑動            //continousVertical是否循環滾動，默認為false,注意這個屬性和loopTop loopBottom不兼容，不能同時設置            //animateAnchor錨鏈接是否可以控制滾動動畫，默認為true,若為false則錨鏈接定位失效            //recordHistory是否記錄歷史，默認為true,通過瀏覽器的前進后退來導航。若設置autoScrolling:false,那么這個屬性將被關閉            //menu綁定菜單，設定的相關屬性與anchors的值對應后，菜單可以控制滾動條，默認為false。可設置為菜單的jquery選擇器            //menu:"#fullpageMenu",            //navigation是否顯示導航，默認為false            navigation:true,            //navigationPosition導航小圓點的位置            navigationPosition:"right",            //navigationTooltips導航小圓點的提示，注意按順序設置            navigationTooltips:['page1','page2','page3','page4','page5'],            //showActiveTooltip是否顯示當前頁面的tooltip信息，默認為false            //slidesNavigation 是否顯示橫向幻燈片的導航，默認為false            slidesNavigation:true,            //slidesNavPosition橫向導航的位置，默認為bottom，可以設置為top或bottom            slidesNavPositon:"top",            //scrollOverflow內容超過滿屏后是否顯示滾動條，默認為false,如果為true則會顯示滾動條，若需滾動查看內容還需要jquery.slimscroll插件的配合            //sectionSelector:section選擇器。默認為.section            //slideSelector:slide選擇器，默認為.slide            //方法介紹            //$.fn.fullpage.***()            //moveSectionUp()向上滾動一頁            //moveSectionDown()向下滾動一頁            //moveTo(section,slide)section從1開始，slide從0開始            //silentMoveTo(section,slide)和moveTo一樣，但是沒有滾動效果            //moveSlideRight()幻燈片向右滾動            //moveSlideLeft()幻燈片向左滾動            //setAutoScrolling(boolean):動態設置autoScrolling            //setLockAnchors(boolean):動態設置lockAnchors            //setRecordHistory(boolean):動態設置recordHistory            //setScrollingSpeed(milliseconds):動態設置scrollingSpeed            //destory(type)銷毀fullpage,type可以不寫或者使用all            //reBuild()重新更新頁面和尺寸，用于ajax請求改變頁面結構后重建效果            //lazyLoading        });    });    </script></body></html>

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 是必須的，用于 easing 參數，也可以使用完整的 jQuery UI 代替 --><script src="js/jquery.easings.min.js"></script><!-- 如果 scrollOverflow 設置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 --><script src="js/jquery.slimscroll.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

$(function(){    $('#fullpage').fullpage();});

配置

1、選項

verticalCentered	字符串	true	內容是否垂直居中
resize	布爾值	false	字體是否隨著窗口縮放而縮放
slidesColor	函數	無	設置背景顏色
anchors	數組	無	定義錨鏈接
scrollingSpeed	整數	700	滾動速度，單位為毫秒
easing	字符串	easeInQuart	滾動動畫方式
menu	布爾值	false	綁定菜單，設定的相關屬性與 anchors 的值對應后，菜單可以控制滾動
navigation	布爾值	false	是否顯示項目導航
navigationPosition	字符串	right	項目導航的位置，可選 left 或 right
navigationColor	字符串	#000	項目導航的顏色
navigationTooltips	數組	空	項目導航的 tip
slidesNavigation	布爾值	false	是否顯示左右滑塊的項目導航
slidesNavPosition	字符串	bottom	左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor	字符串	#fff	左右滑塊的箭頭的背景顏色
loopBottom	布爾值	false	滾動到最底部后是否滾回頂部
loopTop	布爾值	false	滾動到最頂部后是否滾底部
loopHorizontal	布爾值	true	左右滑塊是否循環滑動
autoScrolling	布爾值	true	是否使用插件的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條
scrollOverflow	布爾值	false	內容超過滿屏后是否顯示滾動條
css3	布爾值	false	是否使用 CSS3 transforms 滾動
paddingTop	字符串	0	與頂部的距離
paddingBottom	字符串	0	與底部距離
fixedElements	字符串	無
normalScrollElements		無
keyboardScrolling	布爾值	true	是否使用鍵盤方向鍵導航
touchSensitivity	整數	5
continuousVertical	布爾值	false	是否循環滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor	布爾值	true
normalScrollElementTouchThreshold	整數	5

2、方法

moveSectionUp()	向上滾動
moveSectionDown()	向下滾動
moveTo(section, slide)	滾動到
moveSlideRight()	slide 向右滾動
moveSlideLeft()	slide 向左滾動
setAutoScrolling()	設置頁面滾動方式，設置為 true 時自動滾動
setAllowScrolling()	添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling()	添加或刪除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒為單位的滾動速度

3、回調函數

afterLoad	滾動到某一屏后的回調函數，接收 anchorLink 和 index 兩個參數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
onLeave	滾動前的回調函數，接收 index、nextIndex 和 direction 3個參數： index 是離開的“頁面”的序號，從1開始計算； nextIndex 是滾動到的“頁面”的序號，從1開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender	頁面結構生成后的回調函數，或者說頁面初始化完成后的回調函數
afterSlideLoad	滾動到某一水平滑塊后的回調函數，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數
onSlideLeave	某一水平滑塊滾動前的回調函數，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數