溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關(guān)全屏滾動插件fullPage.js，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
<link rel="stylesheet" type="text/css" href="fullpage.css" /><!-- 以下行是可選的。 只有在使用選項css3:false，并且您希望使用其他緩動效果，而非“l(fā)inear”、“swing”或“easeInOutCubic”時才有必要。 --><script src="vendors/easings.min.js"></script><!-- 以下行僅在使用選項scrollOverflow:true的情況下是必需的 --><script type="text/javascript" src="vendors/scrolloverflow.min.js"></script><script type="text/javascript" src="fullpage.js"></script>
如果您愿意，可以使用bower或npm安裝fullPage.js：
// 使用bowerbower install fullpage.js// 使用npmnpm install fullpage.js
HTML文件中的首行HTML代碼必須使用HTML DOCTYPE 聲明，否則可能會遇到代碼段高度問題。HTML 5 doctype中的示例： <!DOCTYPE html>。
<p id="fullpage"> <p class="section">Some section</p> <p class="section">Some section</p> <p class="section">Some section</p> <p class="section">Some section</p></p>
每個代碼段定義為包含.section的元素。 第一個代碼段作為第一屏，是默認激活。 代碼段應(yīng)被包含在（即<p id="fullpage"> ）父元素中。 注意，父元素不能是body元素。
如果你想定義一個與眾不同的起始頁面，而不是原始第一段或第一個滑動頁，只需將.active類添加到你想首先載入的段或滑動頁。
<p class="section active">Some section</p>
用原生Javascript初始化，只需要在關(guān)閉</body>標簽之前調(diào)用fullPage.js。
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è)置的更復雜的初始化如下所示：
var myFullpage = new fullpage('#fullpage', { //導航 menu: '#menu', //綁定菜單，設(shè)定的相關(guān)屬性與 anchors 的值對應(yīng)后，菜單可以控制滾動 lockAnchors: false, //（默認為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，則會顯示一個由小圓圈組成的導航欄 navigationPosition: 'right', //（默認none）可以設(shè)置為left或right，并定義導航欄顯示的位置（如果使用的話） navigationTooltips: ['firstSlide', 'secondSlide'], //（默認為[]）定義要使用導航圈的工具提示。 如果您愿意，也可以在每個部分中使用屬性data-tooltip來定義它們 showActiveTooltip: false, //顯示垂直導航中主動查看節(jié)的持久工具提示 slidesNavigation: false, //如果設(shè)置為true，則會顯示一個導航欄，該導航欄由站點上每個橫向滑塊的小圓圈組成。 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功能仍將按預期工作。 用戶也可以使用滾動條自由滾動網(wǎ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, //定義如何滾動到比視口大的部分。 默認情況下，如果您來自目的地上方的部分，fullPage.js將滾動到頂部，如果您來自目的地之下的部分，則會滾動到底部。 可能的值是top，bottom，null。 //可訪問 keyboardScrolling: true, //定義是否可以使用鍵盤瀏覽內(nèi)容 animateAnchor: true, //定義給定錨點（＃）的站點的負載是否會隨著動畫滾動到其目的地或直接加載給定部分 recordHistory: true, //定義是否將網(wǎng)站的狀態(tài)推送到瀏覽器的歷史記錄。 設(shè)置為true時，網(wǎng)站的每個部分/幻燈片將作為新頁面，瀏覽器的后退和前進按鈕將滾動部分/幻燈片以達到網(wǎng)站的上一個或下一個狀態(tài)。 當設(shè)置為false時，URL將保持更改，但不會影響瀏覽器的歷史記錄。 使用autoScrolling：false時，該選項會自動關(guān)閉。 //設(shè)計 controlArrows: true, //確定是否將幻燈片的控制箭頭向右或向左移動 verticalCentered: true, //在段落內(nèi)部垂直居中。 當設(shè)置為true時，您的代碼將被庫包裝?？煽紤]使用委托或在afterRender回調(diào)中加載其他腳本 sectionsColor : ['#ccc', '#fff'], //為每個部分定義CSSbackground-color屬性 paddingTop: '3em', //與頂部的距離 paddingBottom: '10px', //與底部距離 fixedElements: '#header, .footer', //定義當使用css3選項保持固定時，哪些元素將從插件的滾動結(jié)構(gòu)中移除。 它需要一個字符串與這些元素的Javascript選擇器。 （例如：fixedElements：'＃element1，.element2'） responsiveWidth: 0, //一個正常的滾動（autoScrolling：false）將在定義的寬度下以像素為單位使用。 如果用戶希望將自己的響應(yīng)式CSS用于身體標記，則會將fp-responsive類添加到身體標記中。 例如，如果設(shè)置為900，則每當瀏覽器的寬度小于900時，插件將像正常站點一樣滾動。 responsiveHeight: 0, //一個正常的滾動（autoScrolling：false）將在定義的高度下以像素為單位使用。 如果用戶希望將自己的響應(yīng)式CSS用于身體標記，則會將fp-responsive類添加到身體標記中。 例如，如果設(shè)置為900，則每當瀏覽器的高度小于900時，插件將像正常站點一樣滾動。 //自定義選擇器 sectionSelector: '.section', //定義用于插件部分的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 slideSelector: '.slide', //定義用于插件幻燈片的Javascript選擇器。 有時可能需要更改，以避免與使用與fullpage.js相同的選擇器的其他插件的問題。 lazyLoading: true, //延遲加載默認是激活的，這意味著它會延遲加載包含屬性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ā)任何需要文檔準備就緒的代碼 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() 添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒為單位的滾動速度
fullPage.js提供了一種延遲加載圖像、視頻和音頻元素的方式，這樣它們不會減慢網(wǎng)站的加載速度，也不會浪費數(shù)據(jù)傳輸。 當使用延遲加載時，所有這些元素只有在進入視口時才會加載。 要啟用延遲加載，您只需將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>
如果您已經(jīng)使用另一個使用data-src的延遲加載解決方案，則可以通過設(shè)置 lazyLoading: false選項來禁用fullPage.js延遲加載。
對于視頻或音頻使用屬性 autoplay，或者對于youtube iframe使用參數(shù)autoplay=1將使得在加載頁面時播放媒體元素。 在段落/幻燈片載入使用而不是屬性data-autoplay播放。 例如：
<audio data-autoplay> <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"></audio>
嵌入式HTML5<video>/<audio>和Youtube iframe在離開某個段落或幻燈片時自動暫停。 可以通過使用屬性data-keepplaying來禁用。 例如：
<audio data-keepplaying> <source src="http://metakoncept.hr/horse.ogg" type="audio/ogg"></audio>
關(guān)于全屏滾動插件fullPage.js就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
