基于jQuery的全屏滾動插件fullPage.js

時間：2023-09-05 20:00:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-05 20:00:01 來源：網(wǎng)站運(yùn)營

基于jQuery的全屏滾動插件fullPage.js：

作用說明

fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。如今我們經(jīng)常能見到全屏網(wǎng)站，尤其是國外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內(nèi)容，顯得格外的高端大氣上檔次。如果你也希望你的網(wǎng)站能設(shè)計(jì)成全屏的，顯得更上檔次，你可以試試 fullPage.js。

fullPage.js的主要功能有：支持鼠標(biāo)滾動、支持前進(jìn)后退和鍵盤控制、多個回調(diào)函數(shù)、支持手機(jī)、平板觸摸事件、支持 CSS3 動畫、支持窗口縮放、窗口縮放時自動調(diào)整、可設(shè)置滾動寬度、背景顏色、滾動速度、循環(huán)選項(xiàng)、回調(diào)、文本對齊方式等等

使用說明

1、引入插件文件

這個插件依賴于jQuery，所以你還需要下載jQuery，并且在Fullpage插件之前引入。

<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /><script src="/fullpage/jquery.min.js"></script><script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>如果你需要自定義頁面滾動的效果，你需要引入jquery.easings.min.js文件。

<script src="/fullpage/jquery.easings.min.js"></script>對于內(nèi)容比較多的頁面，可以設(shè)置右側(cè)的滾動條，但是默認(rèn)情況下無法滾動，你需要jquery.slimscroll.min.js文件來自定義滑條滾動效果。

<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>最后，如果你不想下載到項(xiàng)目中，您可以使用開源項(xiàng)目CDN服務(wù)，F(xiàn)ullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js

2、編寫HTML代碼

默認(rèn)情況下，每一屏幕的代碼都需要有DIV包裹，并且設(shè)置DIV的類名為section，默認(rèn)情況下，第一個setion將作為首頁顯示在頁面上。

<div id="fullpage'"><div class="section">Some section</div><div class="section">Some section</div><div class="section">Some section</div><div class="section">Some section</div></div>假如你需要讓某一個section作為首頁的第一屏展示，你只需要給這個section添加一個active的類，F(xiàn)ullpage會自動優(yōu)先展示這個屏幕，例如定義下面的代碼：

<div class="section active">Some section</div>Fullpage自帶左右滑動的幻燈片，只需要在section中添加DIV元素，并且給DIV元素添加slide類，F(xiàn)Ullpage會自動生成幻燈片特效，例如下面的代碼：

<div class="section"><div class="slide"> Slide 1 </div><div class="slide"> Slide 2 </div><div class="slide"> Slide 3 </div><div class="slide"> Slide 4 </div></div>3、初始化Fullpage

使用jQuery的文檔加載完畢以后執(zhí)行函數(shù)，初始化Fullpage插件。

$(document).ready(function() {$('#fullpage').fullpage();});所有的選項(xiàng)設(shè)置更復(fù)雜的初始化可能看起來像這樣：

$(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//綁定菜單，設(shè)定的相關(guān)屬性與anchors的值對應(yīng)后，菜單可以控制滾動，默認(rèn)為false。 anchors:['firstPage', 'secondPage'],//anchors定義錨鏈接，默認(rèn)為[] lockAnchors: false,//是否鎖定錨鏈接，默認(rèn)為false,設(shè)為true后鏈接地址不會改變 navigation: false,//是否顯示導(dǎo)航，默認(rèn)為false navigationPosition: 'right',//導(dǎo)航小圓點(diǎn)的位置 navigationTooltips: ['firstSlide', 'secondSlide'],//導(dǎo)航小圓點(diǎn)的提示 showActiveTooltip: false,//是否顯示當(dāng)前頁面的tooltip信息 slidesNavigation: true,//是否顯示橫向幻燈片的導(dǎo)航，默認(rèn)為false slidesNavPosition: 'bottom',//橫向?qū)Ш降奈恢?，默認(rèn)為bottom，可以設(shè)置為top或bottom //Scrolling css3: true,//是否使用CSS3 transforms來實(shí)現(xiàn)滾動效果，默認(rèn)為true scrollingSpeed: 700,//設(shè)置滾動速度，單位毫秒，默認(rèn)700 autoScrolling: true,//是否使用插件的滾動方式，默認(rèn)為true,若為false則會出現(xiàn)瀏覽器自帶滾動條 fitToSection: true,//設(shè)置是否自適應(yīng)整個窗口的空間，默認(rèn)值：true scrollBar: false,//是否包含滾動條，默認(rèn)為false,若為true瀏覽器自帶滾動條出現(xiàn) easing: 'easeInOutCubic',//定義頁面section滾動的動畫方式，若修改此項(xiàng)需引入jquery.easing插件 easingcss3: 'ease',//定義頁面section滾動的過渡效果，若修改此項(xiàng)需引入第三方插件 loopBottom: false,//滾動到最低部后是否連續(xù)滾動到頂部，默認(rèn)為false loopTop: false,//滾動到最頂部后是否連續(xù)滾動到底部，默認(rèn)為false loopHorizontal: true,//橫向slide幻燈片是否循環(huán)滾動，默認(rèn)為true continuousVertical: false,//是否循環(huán)滾動，不兼容loopTop和loopBottom選項(xiàng) normalScrollElements: '#element1, .element2',//避免自動滾動，滾動時的一些元素，例如百度地圖 scrollOverflow: false,//內(nèi)容超過滿屏后是否顯示滾動條，true則顯示滾動條，若需滾動查看內(nèi)容還需要jquery.slimscroll插件的配合 touchSensitivity: 15,//在移動設(shè)備中滑動頁面的敏感性，默認(rèn)為5最高100，越大越難滑動 normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true,//是否可以使用鍵盤方向鍵導(dǎo)航，默認(rèn)為true animateAnchor: true,//錨鏈接是否可以控制滾動動畫，默認(rèn)為true,若為false則錨鏈接定位失效 recordHistory: true,//是否記錄歷史，默認(rèn)為true,瀏覽器的前進(jìn)后退可導(dǎo)航。若autoScrolling:false,那么這個屬性將被關(guān)閉 //Design controlArrows: true,//定義是否通過箭頭來控制slide,默認(rèn)true verticalCentered: true,//定義每一頁的內(nèi)容是否垂直居中，默認(rèn)true resize : false,//字體是否隨窗口縮放而縮放，默認(rèn)false sectionsColor : ['#ccc', '#fff'],//為每個section設(shè)置background-color屬性 paddingTop: '3em',設(shè)置每一個section頂部的padding,默認(rèn)為0 paddingBottom: '10px',設(shè)置每一個section底部的padding,默認(rèn)為0 fixedElements: '#header, .footer',固定元素，默認(rèn)為null,需要配置一個jquery選擇器，在頁面滾動時，fixElements設(shè)置的元素不滾動 responsiveWidth: 0, responsiveHeight: 0, //Custom selectors sectionSelector: '.section',//section選擇器。默認(rèn)為.section slideSelector: '.slide',//slide選擇器，默認(rèn)為.slide //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} });});

參數(shù)說明

menu

默認(rèn)值：false，一個選擇器可以用來指定要與滾動互動的導(dǎo)航菜單，有點(diǎn)類似與Bootstrap的滾動監(jiān)聽。這樣到滾動到某個section時，對應(yīng)的菜單會被自動添加active類。

注意，這個選項(xiàng)不會自動生成一個導(dǎo)航菜單，僅僅是給指定的菜單中當(dāng)前菜單項(xiàng)添加一個active活動類。

為了讓自定義導(dǎo)航菜單和屏幕section互動，需要給菜單添加一個HTML5的自定義屬性（data-menuanchor），需要和錨文本設(shè)置相同的內(nèi)容，例如下面的示例代碼：

<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li></ul>


$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu'});注意：注意這個自定義的菜單代碼應(yīng)該放置到插件設(shè)置的內(nèi)容外面，避免因?yàn)榕虐娌患嫒輪栴}可以使用css3:true，否則將被附加到body的插件本身。

anchors

默認(rèn)值：[]，定義導(dǎo)航的錨文本信息例如（#example），每個導(dǎo)航文本之前用英文逗號（,）分隔，快速導(dǎo)航的錨文本URL也是使用的這個文本，瀏覽器通過此錨文本鏈接可以支持前進(jìn)和后退按鈕功能。

此選項(xiàng)的設(shè)置還可以作為用戶的書簽，當(dāng)用戶打開帶有錨文本的URL時，F(xiàn)ullpage可以自動跳轉(zhuǎn)到對應(yīng)的section屏幕或者slide幻燈片位置。

注意，如果你使用了此選項(xiàng)，那么網(wǎng)頁中不能有相同的ID，一來Fullpage插件無法準(zhǔn)確的定位到section屏幕或者slide幻燈片位置，二來這也有悖網(wǎng)頁中CSS的編寫規(guī)范。

lockAnchors

默認(rèn)值：false，確定是否在URL中的錨點(diǎn)將在插件有任何影響。你仍然可以使用錨內(nèi)部自己的函數(shù)和回調(diào)，但他們不會有任何作用，在網(wǎng)站的滾動。如果你想把fullpage.js在URL使用錨其他插件。

注意，這樣的設(shè)置有助于了解anchors選項(xiàng)在側(cè)邊欄菜單的對應(yīng)關(guān)系，與類的元素的值。通過.section它在標(biāo)記的位置。

navigation

默認(rèn)值：false，如果設(shè)置為true，那他將會顯示一個小圓圈組成的快速導(dǎo)航欄。

navigationPosition

默認(rèn)值：none，結(jié)合參數(shù)navigation一起使用，用于設(shè)置navigation定義的菜單顯示的位置，可以設(shè)置為left/right。

navigationTooltips

默認(rèn)值：[]，定義當(dāng)navigation設(shè)置為true的時候，鼠標(biāo)移動到快速導(dǎo)航上面的提示文本，每個屬性中間用英文半角逗號（,）隔開。

showActiveTooltip

默認(rèn)值：false，設(shè)置是否自動顯示navigationTooltips中設(shè)置的工具提示文本。

slidesNavigation

默認(rèn)值：false，使用方法同navigation，不過這個參數(shù)設(shè)置的導(dǎo)航顯示位置不同，而且這個是用戶設(shè)置幻燈片的。

slidesNavPosition

默認(rèn)值：bottom，定義slidesNavigation中設(shè)置的導(dǎo)航菜單顯示的位置，可選的設(shè)置值為top/bottom，你可能要修改CSS樣式確定的距離從頂部或底部以及任何其他風(fēng)格如顏色。

css3

默認(rèn)值：true，確定是否使用JavaScript和CSS3轉(zhuǎn)換滾動在切片和幻燈片。加快平板電腦和移動設(shè)備的瀏覽器支持CSS3的運(yùn)動有益。如果此選項(xiàng)設(shè)置為true，瀏覽器不支持CSS3，jQuery回調(diào)函數(shù)將被替代。

scrollingSpeed

默認(rèn)值：700，每個屏幕滾動動畫執(zhí)行的時間，時間的單位為毫秒（ms）。

autoScrolling

默認(rèn)值：true，定義屏幕是否自動滾動，還是需要用戶觸發(fā)事件滾動，它也影響了部分適合在平板電腦和手機(jī)瀏覽器/設(shè)備窗口。

fitToSection

默認(rèn)值：true，設(shè)置是否自適應(yīng)整個窗口的空間，以某個section的內(nèi)容為分界線，設(shè)置為true時，某個的section將填充到整個頁面，否者用戶可以停留在網(wǎng)頁的任何位置。

scrollBar

默認(rèn)值：false，定義是否使用瀏覽器默認(rèn)的滾動條，如果使用瀏覽器默認(rèn)的滾動條，autoScrolling配置任然生效，用戶也可以自由滾動的網(wǎng)站與滾動條和fullpage.js將適合的部分在屏幕滾動時完成。

easing

默認(rèn)值：easeInOutCubic，定義了用于垂直和水平滾動的過渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具體的動畫效果你可以參考 easings插件介紹 ，你也可以使用其它的動畫插件庫。

easingcss3

默認(rèn)值：ease，定義在滾動屏幕中使用css3:true設(shè)置的過度效果，你可以使用 CSS3 transition-timing-function 屬性 自定義多個動畫效果，例如：linear、ease-out、……，或者使用cubic-bezier方法創(chuàng)建自定義的動畫效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 創(chuàng)建這個。

loopBottom

默認(rèn)值：false，定義屏幕滾動到最后一個后，是否循環(huán)滾動到第一個。

loopTop

默認(rèn)值：false，定義屏幕滾動到第一個后，是否循序滾動到最后一個。

loopHorizontal

默認(rèn)值：true，定義水平的幻燈片是否循環(huán)切換。

continuousVertical

默認(rèn)值：false，定義向下滾動到最后一節(jié)是否應(yīng)該向下滾動到第一個，如果向上滾動的第一部分應(yīng)該滾動到最后一個。不兼容loopTop和loopBottom選項(xiàng)。

normalScrollElements

默認(rèn)值：null，如果你想避免自動滾動，滾動時的一些元素，這是你需要使用的選項(xiàng)。（有用的地圖，滾動div等）需要對這些元素的jQuery選擇器字符串。例如：normalScrollElements: ‘#element1, .element2’。

scrollOverflow

默認(rèn)值：false，設(shè)置當(dāng)內(nèi)容超過屏幕的高度的時候，是否裁切多余的內(nèi)容。

• 當(dāng)設(shè)置為true時，你的內(nèi)容將會被自動裁切，可以考慮當(dāng)afterRender回調(diào)函數(shù)調(diào)用的時候，處理你的內(nèi)容的多少或者使用其它的插件庫合理的處理多余的內(nèi)容。
• 當(dāng)設(shè)置為false時，插件不會自動裁切多余的內(nèi)容，但是剩下沒有顯示的內(nèi)容任然不能顯示，此時，你可以使用 jquery.slimscroll.min插件來自定義滾動事件，如果要使用這個插件，應(yīng)該在Fullpage插件之前引入，例如下面的代碼：

<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script>touchSensitivity

默認(rèn)值：5，定義了瀏覽器窗口的寬度/高度的百分比，多遠(yuǎn)的觸摸滑動可以跳轉(zhuǎn)到下一個section / slide。

normalScrollElementTouchThreshold

默認(rèn)值：5，定義了一個數(shù)字，測試HTML標(biāo)簽樹的機(jī)構(gòu)，是否在在移動設(shè)備上支持觸摸事件。

keyboardScrolling

默認(rèn)值：true，定義是否可以通過鍵盤箭頭事件控制section的滾動。

animateAnchor

默認(rèn)值：true，定義當(dāng)網(wǎng)頁的URL中有錨文本的時候，是否幫用戶定位到對應(yīng)的section或者slide。

recordHistory

默認(rèn)值：true，定義是否將網(wǎng)頁滾動的的狀態(tài)紀(jì)錄到瀏覽器的歷史記錄中。

• 當(dāng)設(shè)置為true時，每一個section/slide滾動的狀態(tài)將紀(jì)錄到瀏覽器的歷史紀(jì)錄中，這樣的設(shè)置有利于用戶方便回退到剛才瀏覽的內(nèi)容。
• 當(dāng)設(shè)置為false時候，用戶的瀏覽路徑不會記錄到瀏覽器的歷史紀(jì)錄中，如果要取消這個選項(xiàng)可以使用autoScrolling:false。

controlArrows

默認(rèn)值：true，決定是否使用控制箭頭向左或向右移動幻燈片。

verticalCentered

默認(rèn)值：true，決定是否初始化后，是否垂直居中網(wǎng)頁的內(nèi)容，如果你想自定義元素的位置，那么你可以設(shè)置為false，在插件初始化后調(diào)用afterrender回調(diào)函數(shù)加載其它的腳本庫設(shè)置你網(wǎng)頁的內(nèi)容。

resize

默認(rèn)值：true，是否在窗口改變大小后，自動調(diào)整網(wǎng)頁中字體的大小。

sectionsColor

默認(rèn)值：none，定義每個section的CSS背景演示，例如下面的代碼：

$('#fullpage').fullpage({ sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],});如果設(shè)置的參數(shù)不對稱，比如屏幕個數(shù)多余設(shè)置的顏色個數(shù)，那么多余的屏幕默認(rèn)沒有背景顏色，如果屏幕個數(shù)少于設(shè)置的顏色個數(shù)，那么多余的顏色將不顯示。

paddingTop

默認(rèn)值：0，定義每個section固定的頭部留白，例如設(shè)置paddingTop: ’10px’、 paddingTop: ’10em’、……，在使用固定表頭的情況下有用的。

paddingBottom

默認(rèn)值：0，定義每個section固定的底部留白，例如設(shè)置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定底部導(dǎo)航的情況下有用的。

fixedElements

默認(rèn)值：null，定義的某個元素是否在網(wǎng)頁的固定位置，元素將被關(guān)閉的插件是必要的時候，使用CSS3的選項(xiàng)保持滾動結(jié)構(gòu)固定。它需要對這些元素的jQuery選擇器字符串。例如：fixedElements: ‘#element1, .element2’。

responsiveWidth

默認(rèn)值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默認(rèn)值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.

sectionSelector

默認(rèn)值：.section，定義用于選擇全屏滾動內(nèi)容的jQuery選擇器。它可能需要改變，有時為了避免與其他插件使用相同的選擇器作為整版的問題。

slideSelector

默認(rèn)值：.slide，定義用于插件幻燈片jQuery選擇器。它可能需要改變，有時為了避免與其他插件使用相同的選擇器fullpage.js問題。

onLeave (index, nextIndex, direction)

滾動前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個參數(shù)

• index 是離開的“頁面”的序號，從1開始計(jì)算；
• nextIndex 是滾動到的“頁面”的序號，從1開始計(jì)算；
• direction 判斷往上滾動還是往下滾動，值是 up 或 down。

$('#fullpage').fullpage({ onLeave: function(index, nextIndex, direction){ var leavingSection = $(this); //after leaving section 2 if(index == 2 && direction =='down'){ alert("Going to section 3!"); } else if(index == 2 && direction == 'up'){ alert("Going to section 1!"); } }});取消section的滾動

你可以在onLeave 回調(diào)函數(shù)中返回false，那么將取消滾動。

$('#fullpage').fullpage({ onLeave: function(index, nextIndex, direction){ //it won't scroll if the destination is the 3rd section if(nextIndex == 3){ return false; } }});afterLoad (anchorLink, index)

滾動到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個參數(shù)。

• anchorLink 是錨鏈接的名稱
• index 是section的索引，從1開始計(jì)算

在沒有設(shè)置錨文本的情況下，只有使用唯一的index參數(shù)。

$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 3){ alert("Section 3 ended loading"); } //using anchorLink if(anchorLink == 'secondSlide'){ alert("Section 2 ended loading"); } }});afterRender()

這個回調(diào)函數(shù)只是在生成頁面結(jié)構(gòu)的時候調(diào)用。這是要用來初始化其他插件或刪除任何需要的文件準(zhǔn)備好代碼的回調(diào)（這個插件修改DOM創(chuàng)建得到的結(jié)構(gòu)）。

$('#fullpage').fullpage({ afterRender: function(){ var pluginContainer = $(this); alert("The resulting DOM structure is ready"); }});afterResize()

這個回調(diào)函數(shù)在窗口發(fā)生大小改變的時候被調(diào)用，就在部分調(diào)整。

$('#fullpage').fullpage({ afterResize: function(){ var pluginContainer = $(this); alert("The sections have finished resizing"); }});afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)

滾動到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideAnchor: anchor corresponding to the slide (in case there is)
• slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)

在沒有anchorlinks的幻燈片或幻燈片SlideIndex參數(shù)是唯一使用定義的情況下。

$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){ var loadedSlide = $(this); //first slide of the second section if(anchorLink == 'secondPage' && slideIndex == 1){ alert("First slide loaded"); } //second slide of the second section (supposing #secondSlide is the //anchor for the second slide if(index == 2 && slideIndex == 'secondSlide'){ alert("Second slide loaded"); } }});onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)

某一水平滑塊滾動前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)。

• anchorLink: anchorLink corresponding to the section.
• index: index of the section. Starting from 1.
• slideIndex: index of the slide. Starting from 0.
• direction: takes the values right or left depending on the scrolling direction.
• nextSlideIndex: index of the destination slide. Starting from 0.

$('#fullpage').fullpage({ onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){ var leavingSlide = $(this); //leaving the first slide of the 2nd Section to the right if(index == 2 && slideIndex == 0 && direction == 'right'){ alert("Leaving the fist slide!!"); } //leaving the 3rd slide of the 2nd Section to the left if(index == 2 && slideIndex == 2 && direction == 'left'){ alert("Going to slide 2! "); } }});取消slide滑動

你可以設(shè)置回調(diào)函數(shù)onSlideLeave 返回false，那么他將阻止此次的滑動事件，就像onLeave一樣。

Fullpage方法函數(shù)

$.fn.fullpage.moveSectionUp();//向上滾動一頁 $.fn.fullpage.moveSectionDown();//向下滾動一頁 $.fn.fullpage.moveTo(section,slide);//從1開始，slide從0開始 $.fn.fullpage.silentMoveTo(section,slide);//和moveTo一樣，但是沒有滾動效果 $.fn.fullpage.moveSlideRight();//幻燈片向右滾動 $.fn.fullpage.moveSlideLeft();//幻燈片向左滾動 $.fn.fullpage.setAutoScrolling(boolean);//動態(tài)設(shè)置autoScrolling $.fn.fullpage.setLockAnchors(boolean);//動態(tài)設(shè)置lockAnchors $.fn.fullpage.setRecordHistory(boolean);//動態(tài)設(shè)置recordHistory $.fn.fullpage.setScrollingSpeed(milliseconds);//動態(tài)設(shè)置scrollingSpeed $.fn.fullpage.destory(type);//銷毀fullpage,type可以不寫或者使用all $.fn.fullpage.reBuild();/重新更新頁面和尺寸，用于ajax請求改變頁面結(jié)構(gòu)后重建效果moveSectionUp()

設(shè)置section向上滾動

$.fn.fullpage.moveSectionUp();

moveSectionDown()

設(shè)置section向下滾動

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

設(shè)置屏幕滾動到某個section或者slide，兩個參數(shù)都是某個內(nèi)容塊的索引值或者是錨文本，默認(rèn)情況下slide的索引被設(shè)置為0。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */$.fn.fullpage.moveTo('firstSlide', 2); //Scrolling to the 3rd section in the site$.fn.fullpage.moveTo(3, 0); //Which is the same as$.fn.fullpage.moveTo(3);silentMoveTo(section, slide)

這個函數(shù)的用法和MoveTo方法完全一樣，只是MoveTo在切換的時候有動畫效果，而silentMoveTo方法在切換的時候沒有動畫效果，直接跳轉(zhuǎn)到對應(yīng)的section中。

/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */$.fn.fullpage.silentMoveTo('firstSlide', 2);moveSlideRight()

設(shè)置幻燈片向右滑動，將下一個幻燈片顯示在當(dāng)前的屏幕中。

$.fn.fullpage.moveSlideRight();moveSlideLeft()

設(shè)置幻燈片向左滑動，將上一個幻燈片顯示在當(dāng)前的屏幕中。

$.fn.fullpage.moveSlideLeft();setAutoScrolling(boolean)

可以實(shí)時的控制頁面滾動的方式，可選的參數(shù)false/true。

• 如果參數(shù)被設(shè)置為true，所有的section將自動滾動。
• 如果參數(shù)被設(shè)置為false，所有的section將不會自動滾動，需要用戶手動或者使用瀏覽器的滑條滾動網(wǎng)頁。

注意，scrollOverflow參數(shù)如果設(shè)置為true，它可能很難滾動鼠標(biāo)滾輪或觸摸板當(dāng)部分滾動。

$.fn.fullpage.setAutoScrolling(false);setFitToSection(boolean)

該函數(shù)設(shè)置選項(xiàng)fitToSection確定是否自適應(yīng)section在屏幕上。

$.fn.fullpage.setFitToSection(false);setLockAnchors(boolean)

設(shè)置選項(xiàng)lockAnchors確定將錨文本鎖定到URL中。

$.fn.fullpage.setLockAnchors(false);setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自動綁定的鼠標(biāo)滑輪和移動觸摸事件，不過用戶任然可以通過鍵盤和點(diǎn)擊快速導(dǎo)航的方式切換section/slide。要取消鍵盤事件你應(yīng)該使用setKeyboardScrolling方法。

• directions，可選參數(shù)，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)，例如down, right，他設(shè)置的兩個方向上將禁止或者激活滾動。

//disabling scrolling$.fn.fullpage.setAllowScrolling(false); //disabling scrolling down$.fn.fullpage.setAllowScrolling(false, 'down'); //disabling scrolling down and right$.fn.fullpage.setAllowScrolling(false, 'down, right');setKeyboardScrolling(boolean, [directions])

添加或者禁止鍵盤對section/slide的控制，這個事件是默認(rèn)綁定的。

• directions，可選參數(shù)，可以設(shè)置的值：all, up, down, left, right或者設(shè)置組合的參數(shù)，例如down, right，他設(shè)置的兩個方向上將禁止或者激活鍵盤的滾動。

//disabling all keyboard scrolling$.fn.fullpage.setKeyboardScrolling(false); //disabling keyboard scrolling down$.fn.fullpage.setKeyboardScrolling(false, 'down'); //disabling keyboard scrolling down and right$.fn.fullpage.setKeyboardScrolling(false, 'down, right');setRecordHistory(boolean)

定義是否為每個URL的變更紀(jì)錄到瀏覽器中的歷史記錄中。

$.fn.fullpage.setRecordHistory(false);setScrollingSpeed(milliseconds)

定義每個section/slide滾動的時間，默認(rèn)的時間單位為毫秒（ms）。

$.fn.fullpage.setScrollingSpeed(700);destroy(type)

移除Fullpage的事件和添加的HTML/CSS樣式風(fēng)格，理想的使用在使用Ajax加載內(nèi)容。

• type：可以被設(shè)置為空字符，或者all，如果一旦執(zhí)行，通過Fullpage添加的HTML/CSS樣式和代碼都將會被移除，將顯示沒有使用Fullpage的樣式，一個使用過任何插件進(jìn)行修改。

//destroy any plugin event (scrolls, hashchange in the URL...)$.fn.fullpage.destroy(); //destroy any plugin event and any plugin modification done over your original HTML markup.$.fn.fullpage.destroy('all');reBuild()

更新DOM結(jié)構(gòu)以適應(yīng)新的窗口大小或其內(nèi)容。理想的使用與Ajax調(diào)用或外部網(wǎng)站的DOM結(jié)構(gòu)的變化組合。

$.fn.fullpage.reBuild();

資源延時加載

fullpage.js提供了一種懶加載圖像，視頻和音頻元素，所以他們不會放慢您的網(wǎng)站加載或不必要的浪費(fèi)數(shù)據(jù)傳輸。使用延遲加載時，所有這些元素只會加載時進(jìn)入視口。啟用延遲加載，所有你需要做的是改變你的src屬性的data-src如下圖所示：

<img data-src="image.png"><video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /></video>

演示

基本演示 背景演示 循環(huán)演示

回調(diào)函數(shù)演示 綁定菜單演示 項(xiàng)目導(dǎo)航演示

自動滾動 slide滾動 響應(yīng)式




聲明--文章來源：http://fullpage.81hu.com/

如有侵權(quán)，請聯(lián)系刪除，謝謝?。。?br>