全屏滾動插件fullPage.js-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)全屏滾動插件fullPage.js，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需定制設(shè)計，是成都網(wǎng)站維護(hù)公司,為汽車玻璃修復(fù)提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站營銷推廣熱線：13518219792

使用方法

包含文件

如果您愿意，可以使用bower或npm安裝fullPage.js：

// 使用bowerbower install fullpage.js// 使用npmnpm install fullpage.js

HTML結(jié)構(gòu)

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

用原生Javascript初始化，只需要在關(guān)閉標(biāo)簽之前調(diào)用fullPage.js。

new fullpage('#fullpage', {    //options here    autoScrolling:true,    scrollHorizontally: true});//methodsfullpage_api.setAllowScrolling(false);

也可以使用jQuery進(jìn)行初始化，前提需要先引用jQuery庫。

$(document).ready(function() {    $('#fullpage').fullpage({        //options here        autoScrolling:true,        scrollHorizontally: true    });    //methods    $.fn.fullpage.setAllowScrolling(false);});

功能選項(xiàng)

所有選項(xiàng)設(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中使用錨點(diǎn)來將fullPage.js和其他插件結(jié)合起來，那就很有用。    anchors:['firstPage', 'secondPage'], //定義要在每個部分的URL上顯示的錨鏈接（#example）。 錨點(diǎn)的值應(yīng)該是獨(dú)一無二的。 數(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)航欄由站點(diǎn)上每個橫向滑塊的小圓圈組成。    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, //確定是否使用站點(diǎn)的滾動條。 在使用滾動條的情況下，autoScrolling功能仍將按預(yù)期工作。 用戶也可以使用滾動條自由滾動網(wǎng)站，當(dāng)滾動完成時，fullPage.js將適配屏幕上的部分。    easing: 'easeInOutCubic', //定義用于垂直和水平滾動的過渡效果。    easingcss3: 'ease', //定義在使用css3：true的情況下使用的過渡效果。    loopBottom: false, //滾動到最底部后是否滾回頂部    loopTop: false, //滾動到最頂部后是否滾底部    loopHorizontal: true, //定義水平滑塊是否在到達(dá)上一張或上一張幻燈片后循環(huán)    continuousVertical: false, //是否循環(huán)滾動，與 loopTop 及 loopBottom 不兼容        normalScrollElements: '#element1, .element2', //如果你想在滾動某些元素時避免自動滾動，這是你需要使用的選項(xiàng)    scrollOverflow: false, //內(nèi)容超過滿屏后是否顯示滾動條    touchSensitivity: 15, //定義瀏覽器窗口寬度/高度的百分比，以及滑動到下一個節(jié)/幻燈片必須測量的距離    normalScrollElementTouchThreshold: 5, //定義html節(jié)點(diǎn)樹的跳數(shù)閾值Fullpage將測試normalScrollElements是否匹配，以允許在觸摸設(shè)備上的p的滾動功能。    bigSectionsDestination: null, //定義如何滾動到比視口大的部分。 默認(rèn)情況下，如果您來自目的地上方的部分，fullPage.js將滾動到頂部，如果您來自目的地之下的部分，則會滾動到底部。 可能的值是top，bottom，null。    //可訪問    keyboardScrolling: true, //定義是否可以使用鍵盤瀏覽內(nèi)容    animateAnchor: true, //定義給定錨點(diǎn)（＃）的站點(diǎn)的負(fù)載是否會隨著動畫滾動到其目的地或直接加載給定部分    recordHistory: true, //定義是否將網(wǎng)站的狀態(tài)推送到瀏覽器的歷史記錄。 設(shè)置為true時，網(wǎng)站的每個部分/幻燈片將作為新頁面，瀏覽器的后退和前進(jìn)按鈕將滾動部分/幻燈片以達(dá)到網(wǎng)站的上一個或下一個狀態(tài)。 當(dāng)設(shè)置為false時，URL將保持更改，但不會影響瀏覽器的歷史記錄。 使用autoScrolling：false時，該選項(xiàng)會自動關(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選項(xiàng)保持固定時，哪些元素將從插件的滾動結(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時，插件將像正常站點(diǎn)一樣滾動。    responsiveHeight: 0, //一個正常的滾動（autoScrolling：false）將在定義的高度下以像素為單位使用。 如果用戶希望將自己的響應(yīng)式CSS用于身體標(biāo)記，則會將fp-responsive類添加到身體標(biāo)記中。 例如，如果設(shè)置為900，則每當(dāng)瀏覽器的高度小于900時，插件將像正常站點(diǎn)一樣滾動。    //自定義選擇器    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)站的加載速度，也不會浪費(fèi)數(shù)據(jù)傳輸。 當(dāng)使用延遲加載時，所有這些元素只有在進(jìn)入視口時才會加載。 要啟用延遲加載，您只需將src屬性更改為data-src，如下所示：

如果您已經(jīng)使用另一個使用data-src的延遲加載解決方案，則可以通過設(shè)置lazyLoading: false選項(xiàng)來禁用fullPage.js延遲加載。

自動播放

對于視頻或音頻使用屬性 autoplay，或者對于youtube iframe使用參數(shù)autoplay=1將使得在加載頁面時播放媒體元素。 在段落/幻燈片載入使用而不是屬性data-autoplay播放。 例如：

暫停

嵌入式HTML5

關(guān)于全屏滾動插件fullPage.js就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)站名稱：全屏滾動插件fullPage.js-創(chuàng)新互聯(lián)
當(dāng)前路徑：http://m.jiaotiyi.com/article/epded.html