簡(jiǎn)介

fullPage.js可輕松創(chuàng)建全屏滾動(dòng)網(wǎng)站(也稱為單頁(yè)網(wǎng)站)，同時(shí)也可在網(wǎng)站中添加橫向滾動(dòng)條，很多的官方和設(shè)計(jì)網(wǎng)站都會(huì)使用到它

目前github的star量33.1K

中文官網(wǎng)：https://alvarotrigo.com/fullPage/zh/
github地址：https://github.com/alvarotrigo/fullPage.js

效果預(yù)覽

1、PC電腦端

電腦端效果

2、手機(jī)移動(dòng)端

手機(jī)移動(dòng)端效果

兼容性

fullPage.js 兼容所有的現(xiàn)代瀏覽器，以及一些舊版瀏覽器，如 Internet Explorer 9，Opera 12 等都能兼容。 可兼容支持 CSS3 的瀏覽器與非支持 CSS3 的瀏覽器，適用于舊版瀏覽器。 同時(shí)，手機(jī)、平板電腦和觸摸屏電腦還提供觸屏支持。

安裝

// 通過(guò)npm安裝下載
// 或直接去官網(wǎng)下載源碼
npm i fullpage.js -S
// 樣式文件

// js文件


使用

// 每段定義為包含 section 類的元素
// section里就寫你要展示的內(nèi)容
// 默認(rèn)情況下，第一個(gè) section 代碼段，將被視為主頁(yè)
// 代碼段應(yīng)放在一個(gè)div包裝（即 ）
// 包裝的div不能是 body 元素
Some section
Some section
Some section
Some section


// 如果不想第一段為起始頁(yè)
// 只需將 active 類添加到你想首先載入的段
Some section

// 為在代碼段中創(chuàng)建橫向滑塊
// 在section中再嵌套slide就行
slide 1
slide 2
slide 3
slide 4


// js初始化
new fullpage('#fullpage', {
// 是否自動(dòng)滾動(dòng)
autoScrolling:true,
// 是否支持橫向滾動(dòng)
scrollHorizontally: true
});

常用配置項(xiàng)

new fullpage('#fullpage', {
// 是否自動(dòng)滾動(dòng)
autoScrolling:true,
// 是否支持橫向滾動(dòng)
scrollHorizontally: true,
// 滾動(dòng)轉(zhuǎn)換的速度（以毫秒為單位）
scrollingSpeed:700,
// 在 section 內(nèi)部垂直居中
verticalCentered:true,
// section 定義 CSS background-color 屬性
sectionsColor:none,
});

常用方法

new fullpage后，就可以拿到一個(gè)實(shí)例，這個(gè)實(shí)例可以調(diào)用方法

const fullPage = new fullpage('#fullpage',{})
// 向上滾動(dòng)一個(gè) section
fullPage.moveSectionUp()
// 向下滾動(dòng)一個(gè) section
fullPage.moveSectionDown()
//滾動(dòng)到網(wǎng)站的第三個(gè)section
fullPage.moveTo(3, 0)

常用回調(diào)函數(shù)

我們也可以監(jiān)聽(tīng)一些常用的回調(diào)函數(shù)來(lái)做一些處理

new fullpage('#fullpage', {
// 一屏滾動(dòng)結(jié)束之后
// origin前一個(gè)section
// destination進(jìn)入的section
afterLoad: function(origin,destination){
const loadedSection = this;
//使用 index
if(origin.index == 2){
alert("第3個(gè)section停止加載");
}
},
// 離開(kāi) section
// origin前一個(gè)section
// destination進(jìn)入的section
onLeave: function(origin,destination){
const leavingSection = this;
//離開(kāi)第二個(gè)section后
if(origin.index == 1){
alert("前往第3個(gè)section！");
}
else if(origin.index == 1){
alert("前往第1個(gè)section！");
}
}
});

好了，就介紹到這里了，如果想詳細(xì)了解的話，可以去中文官方文檔看看

覺(jué)得效果不錯(cuò)的請(qǐng)幫忙加個(gè)關(guān)注點(diǎn)個(gè)贊，經(jīng)常分享前端實(shí)用開(kāi)發(fā)技巧

總結(jié)

以上是生活随笔為你收集整理的最好用最强大的全屏滚动插件最好用最强大的全屏滚动插件是哪个的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。