這篇文章將為大家詳細講解有關(guān)全屏滾動插件fullPage.js，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
如果您愿意，可以使用bower或npm安裝fullPage.js：
// 使用bowerbower install fullpage.js// 使用npmnpm install fullpage.js
HTML文件中的首行HTML代碼必須使用HTML DOCTYPE 聲明，否則可能會遇到代碼段高度問題。HTML 5 doctype中的示例：。
Some section Some section Some section Some section
每個代碼段定義為包含.section的元素。 第一個代碼段作為第一屏，是默認(rèn)激活。 代碼段應(yīng)被包含在（即 ）父元素中。 注意，父元素不能是body元素。
如果你想定義一個與眾不同的起始頁面，而不是原始第一段或第一個滑動頁，只需將.active類添加到你想首先載入的段或滑動頁。
Some section
用原生Javascript初始化，只需要在關(guān)閉
new fullpage('#fullpage', { //options here autoScrolling:true, scrollHorizontally: true});//methodsfullpage_api.setAllowScrolling(false);
也可以使用jQuery進行初始化，前提需要先引用jQuery庫。
$(document).ready(function() { $('#fullpage').fullpage({ //options here autoScrolling:true, scrollHorizontally: true }); //methods $.fn.fullpage.setAllowScrolling(false);});
所有選項設(shè)置的更復(fù)雜的初始化如下所示：
var myFullpage = new fullpage('#fullpage', { //導(dǎo)航 menu: '#menu', //綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對應(yīng)后，菜單可以控制滾動 lockAnchors: false, //（默認(rèn)為false）確定URL中的錨是否在庫中完全有效。 您仍然可以在函數(shù)和回調(diào)內(nèi)部使用錨，但是它們在滾動網(wǎng)站時不起任何作用。 如果你想在URL中使用錨點來將fullPage.js和其他插件結(jié)合起來，那就很有用。 anchors:['firstPage', 'secondPage'], //定義要在每個部分的URL上顯示的錨鏈接（#example）。 錨點的值應(yīng)該是獨一無二的。 數(shù)組中的錨的位置將限定錨被應(yīng)用于哪些部分。 navigation: false, //如果設(shè)置為true，則會顯示一個由小圓圈組成的導(dǎo)航欄 navigationPosition: 'right', //（默認(rèn)none）可以設(shè)置為left或right，并定義導(dǎo)航欄顯示的位置（如果使用的話） navigationTooltips: ['firstSlide', 'secondSlide'], //（默認(rèn)為[]）定義要使用導(dǎo)航圈的工具提示。 如果您愿意，也可以在每個部分中使用屬性data-tooltip來定義它們 showActiveTooltip: false, //顯示垂直導(dǎo)航中主動查看節(jié)的持久工具提示 slidesNavigation: false, //如果設(shè)置為true，則會顯示一個導(dǎo)航欄，該導(dǎo)航欄由站點上每個橫向滑塊的小圓圈組成。 slidesNavPosition: 'bottom', //定義滑塊的橫向?qū)Ш綑诘奈恢谩?值為top和bottom。 //滾動 css3: true, //是否使用 CSS3 transforms 滾動 scrollingSpeed: 700, //滾動速度，單位為毫秒 autoScrolling: true, //是否使用插件的滾動方式，如果選擇 false，則會出現(xiàn)瀏覽器自帶的滾動條 fitToSection: true, //確定是否section放入視窗中 fitToSectionDelay: 1000, //如果fitToSection設(shè)置為true，則延遲 以毫秒為單位 scrollBar: false, //確定是否使用站點的滾動條。 在使用滾動條的情況下，autoScrolling功能仍將按預(yù)期工作。 用戶也可以使用滾動條自由滾動網(wǎng)站，當(dāng)滾動完成時，fullPage.js將適配屏幕上的部分。 easing: 'easeInOutCubic', //定義用于垂直和水平滾動的過渡效果。 easingcss3: 'ease', //定義在使用css3：true的情況下使用的過渡效果。 loopBottom: false, //滾動到最底部后是否滾回頂部 loopTop: false, //滾動到最頂部后是否滾底部 loopHorizontal: true, //定義水平滑塊是否在到達上一張或上一張幻燈片后循環(huán) continuousVertical: false, //是否循環(huán)滾動，與 loopTop 及 loopBottom 不兼容 normalScrollElements: '#element1, .element2', //如果你想在滾動某些元素時避免自動滾動，這是你需要使用的選項 scrollOverflow: false, //內(nèi)容超過滿屏后是否顯示滾動條 touchSensitivity: 15, //定義瀏覽器窗口寬度/高度的百分比，以及滑動到下一個節(jié)/幻燈片必須測量的距離 normalScrollElementTouchThreshold: 5, //定義html節(jié)點樹的跳數(shù)閾值Fullpage將測試normalScrollElements是否匹配，以允許在觸摸設(shè)備上的p的滾動功能。 bigSectionsDestination: null, //定義如何滾動到比視口大的部分。 默認(rèn)情況下，如果您來自目的地上方的部分，fullPage.js將滾動到頂部，如果您來自目的地之下的部分，則會滾動到底部。 可能的值是top，bottom，null。 //可訪問 keyboardScrolling: true, //定義是否可以使用鍵盤瀏覽內(nèi)容 animateAnchor: true, //定義給定錨點（＃）的站點的負(fù)載是否會隨著動畫滾動到其目的地或直接加載給定部分 recordHistory: true, //定義是否將網(wǎng)站的狀態(tài)推送到瀏覽器的歷史記錄。 設(shè)置為true時，網(wǎng)站的每個部分/幻燈片將作為新頁面，瀏覽器的后退和前進按鈕將滾動部分/幻燈片以達到網(wǎng)站的上一個或下一個狀態(tài)。 當(dāng)設(shè)置為false時，URL將保持更改，但不會影響瀏覽器的歷史記錄。 使用autoScrolling：false時，該選項會自動關(guān)閉。 //設(shè)計 controlArrows: true, //確定是否將幻燈片的控制箭頭向右或向左移動 verticalCentered: true, //在段落內(nèi)部垂直居中。 當(dāng)設(shè)置為true時，您的代碼將被庫包裝?？煽紤]使用委托或在afterRender回調(diào)中加載其他腳本 sectionsColor : ['#ccc', '#fff'], //為每個部分定義CSSbackground-color屬性 paddingTop: '3em', //與頂部的距離 paddingBottom: '10px', //與底部距離 fixedElements: '#header, .footer', //定義當(dāng)使用css3選項保持固定時，哪些元素將從插件的滾動結(jié)構(gòu)中移除。 它需要一個字符串與這些元素的Javascript選擇器。 （例如：fixedElements：'＃element1，.element2'） responsiveWidth: 0, //一個正常的滾動（autoScrolling：false）將在定義的寬度下以像素為單位使用。 如果用戶希望將自己的響應(yīng)式CSS用于身體標(biāo)記，則會將fp-responsive類添加到身體標(biāo)記中。 例如，如果設(shè)置為900，則每當(dāng)瀏覽器的寬度小于900時，插件將像正常站點一樣滾動。 responsiveHeight: 0, //一個正常的滾動（autoScrolling：false）將在定義的高度下以像素為單位使用。 如果用戶希望將自己的響應(yīng)式CSS用于身體標(biāo)記，則會將fp-responsive類添加到身體標(biāo)記中。 例如，如果設(shè)置為900，則每當(dāng)瀏覽器的高度小于900時，插件將像正常站點一樣滾動。 //自定義選擇器 sectionSelector: '.section', //定義用于插件部分的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 slideSelector: '.slide', //定義用于插件幻燈片的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 lazyLoading: true, //延遲加載默認(rèn)是激活的，這意味著它會延遲加載包含屬性data-src的任何媒體元素 //事件 onLeave: function(index, nextIndex, direction){},//滾動前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個參數(shù)：index 是離開的“頁面”的序號，從1開始計算；nextIndex 是滾動到的“頁面”的序號，從1開始計算；direction 判斷往上滾動還是往下滾動，值是 up 或 down。 afterLoad: function(origin, destination, direction){}, //滾動結(jié)束之后，一旦加載了節(jié)，就會觸發(fā)回調(diào)。 afterRender: function(){}, //這個回調(diào)在頁面結(jié)構(gòu)生成后立即被觸發(fā)。 這是您要用來初始化其他插件的回調(diào)函數(shù)，或者觸發(fā)任何需要文檔準(zhǔn)備就緒的代碼 afterResize: function(width, height){},//調(diào)整瀏覽器窗口大小后，會觸發(fā)此回調(diào)。 afterResponsive: function(isResponsive){}, //在fullpage.js從正常模式變?yōu)轫憫?yīng)模式或從響應(yīng)模式變?yōu)檎ＤＪ街?，此回調(diào)將被觸發(fā) afterSlideLoad: function(section, origin, destination, direction){}, //滾動結(jié)束后，加載一個section的幻燈片后觸發(fā)回調(diào)。 onSlideLeave: function(section, origin, destination, direction){} //一旦用戶離開幻燈片轉(zhuǎn)到另一個幻燈片，就會觸發(fā)此回調(diào)。返回false將在移動發(fā)生之前取消移動。});
方法
moveSectionUp() 向上滾動
moveSectionDown() 向下滾動
moveTo(section, slide) 滾動到
moveSlideRight() slide 向右滾動
moveSlideLeft() slide 向左滾動
setAutoScrolling() 設(shè)置頁面滾動方式，設(shè)置為 true 時自動滾動
setAllowScrolling() 添加或刪除鼠標(biāo)滾輪/觸控板控制
setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒為單位的滾動速度
fullPage.js提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減慢網(wǎng)站的加載速度，也不會浪費數(shù)據(jù)傳輸。 當(dāng)使用延遲加載時，所有這些元素只有在進入視口時才會加載。 要啟用延遲加載，您只需將src屬性更改為data-src，如下所示：
如果您已經(jīng)使用另一個使用data-src的延遲加載解決方案，則可以通過設(shè)置lazyLoading: false選項來禁用fullPage.js延遲加載。
對于視頻或音頻使用屬性 autoplay，或者對于youtube iframe使用參數(shù)autoplay=1將使得在加載頁面時播放媒體元素。 在段落/幻燈片載入使用而不是屬性data-autoplay播放。 例如：
嵌入式HTML5
關(guān)于全屏滾動插件fullPage.js就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
