Fullpage 插件配置項

2024-04-27 15:10:07

字體：大中小

供稿：網(wǎng)友

插件描述：fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站。

如今我們經(jīng)常能見到全屏網(wǎng)站，尤其是國外網(wǎng)站。這些網(wǎng)站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內(nèi)容，主要是動畫，顯得格外的高端大氣上檔次。比如 iphone 5C 的介紹頁面（查看網(wǎng)址 http://www.jq22.com/demo/fullpage-141201214949/index8.html#page2）。如果你也希望你的網(wǎng)站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js。

主要功能有：

支持鼠標滾動支持前進后退和鍵盤控制多個回調(diào)函數(shù)支持手機、平板觸摸事件支持 CSS3 動畫支持窗口縮放窗口縮放時自動調(diào)整

可設置滾動寬度、背景顏色、滾動速度、循環(huán)選項、回調(diào)、文本對齊方式等等

我利用fullpage.js模仿百度輿情完成的全屏輪播網(wǎng)站網(wǎng)址https://xuanrandeyimojingjin.github.io/baiduyuqing/，初學時的作品，謹供大家看一下效果，有興趣的可以自己動手設計自己的全屏網(wǎng)站！

jQuery插件

插件調(diào)用

<ul id="lunbo"> <li>...</li> <li>...</li> <li>...</li> <li>...</li></ul><script src="jquery.js"></script><script src="jqeury.lunbo.js"></script><script>$('#lunbo').lunbo({ //一些配置項 time:40; step:function(){}});</script>

jQuery插件文件

(function($){ var lunbo = function () { console.log(1); } $.fn.extend({ lunbo:lunbo; })})(jQuery)

cdn (content deliver network) 內(nèi)容分發(fā)網(wǎng)絡

如果百度使用了某個 cdn中的jquery.js,而且用戶打開過百度, 我們自己同樣使用了 同一個 cdn中的jquery.js, 用戶打開我們的網(wǎng)頁時使用瀏覽器緩存中的jquery.js.

例子

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./css/index.css"> <script src="https://cdn.boot.com/jquery.js"></script> <script src="./js/index.js"></script> </head> <body> </body></html>

fullpage 插件基本使用

每滾動一屏，會給當前section加上　active class

所以我們可以寫出類似下面這樣的 scss 文件來操控動畫

#section1{ h1{ /**/ } h2{ transition: /**/ }}#section1.active{ h1{ animation:/**/ } h2{ /**/ }}

插件配置項

sectionsColor

一個數(shù)組規(guī)定了各個section的顏色

verticalCentered

每一頁的內(nèi)容是否垂直居中，默認值為true

resize

字體大小是否隨窗口縮放而縮放默認值為false

scrollingSpeed

滾動速度,默認為700毫秒

anchors

給每個section定義錨鏈接

lockAnchors

是否鎖定錨鏈接

active class

默認顯示哪個section

easing

定義頁面section滾動的動畫方式設置這個值需要引入jquery.easings 插件

css3

默認為true,使用css3 transform 來實現(xiàn)頁面滾動動畫

loopTop

滾動到最頂部后是否連續(xù)滾動到底部，默認值為false

loopBottom

滾動到最底部后是否連續(xù)滾動回頂部默認值為false

loopHorizontal

橫向slide幻燈片是否循環(huán)滾動，默認值為true

autoScrolling

是否使用插件的滾動方式，默認值為true, 如果設置為false,則會出現(xiàn)瀏覽器自帶的滾動條

scrollBar

是否包含滾動條，默認值為false 如果設置為true,則瀏覽器自帶的滾動條出現(xiàn) 頁面滾動時還是頁滾動，但是滾動條的默認行為也效果

paddingTop paddingBottom

設置每一個section頂部和底部的padding，默認值為0 如果我們需要設置一個固定在頂部或者底部的菜單，導航，元素等，可以使用這兩個配置項

fixedElements

普通方式書寫的固定定位元素會被插件覆蓋需要我們通過指定這個屬性才會生效，參數(shù)為一個jquery選擇器

keyboardScrolling

是否可以使用鍵盤方向鍵導航，默認值為true

touchSensitivity

在移動設備中滑動頁面的敏感性，默認為5，按百分比衡量，越大則越難滑動

continuousVertical

是否循環(huán)滾動，默認值為false，如果設置為true,則頁面會循環(huán)滾動，不像loopTop loopBottom那樣出現(xiàn)跳動這個屬性和loopTop loopBottom 不兼容不要同時設置

animateAnchor

錨鏈接是否可以控制滾動動畫，默認為true。如果設置為false,則通過錨鏈接定位到某個頁面顯示不再有動畫

recordHistory

是否記錄歷史,默認為true,可以記錄頁面滾動的地址通過瀏覽器前進和后退按鈕來導航

綁定菜單，設定的相關(guān)屬性與anchors的值對應后，菜單可以控制滾動，默認值為 false 可以設置為菜單的jquery選擇器

<ul id="fullpageMenu"> <li data-menuanchor="page1"><a href="#page1">1</a</li> .....</ul>navigation

是否顯示導航，默認false 如果設置為true 會顯示小圓點，作為導航

navigationPosition

導航小圓點位置，可以設置為left或者right

navigationTooltips

導航小圓點的tooltips設置，默認為[],按照順序放置

showActiveTooltip

是否顯示當前頁面的導航的tooltip信息，默認為false

slidesNavigation

是否顯示橫向幻燈片的導航，默認值為false

slidesNavPosition

橫向幻燈片導航的位置，默認為bottom 可以設置為top

controlArrows

定義是否通過箭頭來控制slide幻燈片,默認值為true 在移動設備上可以通過滑動來操作幻燈片

scrollOverflow

內(nèi)容超過滿屏后是否顯示滾動條，默認為false. 如果設置為true,則會顯示滾動條如果要滾動查看內(nèi)容，還需要jquery.slimscroll插件，該插件主要用于模擬傳統(tǒng)的瀏覽器滾動條

sectionSelector

section的選擇器，默認為.section

slideSelector

slide的選擇器默認為.slide.

配置項中的回調(diào)函數(shù)

afterLoad(anchorLink,index)

滾動到某一section，且滾動結(jié)束后，會觸發(fā)一次此回調(diào)函數(shù)，函數(shù)接收 anchorLink 和index 兩個參數(shù)， anchorLink 是錨鏈接的名稱 index 是序號從1開始計算可以根據(jù) anchorLink 和 index的參數(shù)值判斷觸發(fā)相應的事件

onLeave(index,nextIndex,direction)

離開一個section時觸發(fā)，通過return false可以取消滾動離開的序號到達的序號滾動的方向

afterRender()

頁面結(jié)構(gòu)生成之后的回調(diào)函數(shù)

afterResize()

瀏覽器窗口尺寸改變之后的回調(diào)函數(shù)

afterSlideLoad()

滾動到某一個幻燈片后的回調(diào)函數(shù)

onSlideLeave

離開一個slide之后的回調(diào)函數(shù)