資訊專(zhuān)欄INFORMATION COLUMN
摘要：的地址首先已經(jīng)更新到版本了，并且從版本摒棄了的依賴，并且之前多種語(yǔ)言對(duì)開(kāi)發(fā)者友好。但是為了兼容不能使用版本，只能使用版本及其以下，雖然說(shuō)兼容但是實(shí)際上并沒(méi)有兼容。
fullpage的git地址
首先f(wàn)ullpage 已經(jīng)更新到3.x版本了，并且從3.x版本摒棄了jQuery的依賴，并且之前多種語(yǔ)言對(duì)開(kāi)發(fā)者友好。
但是為了兼容ie8不能使用3.x版本，只能使用2.8.9版本及其以下，雖然2.9.x說(shuō)兼容ie8但是實(shí)際上并沒(méi)有兼容。因此想要兼容ie8最高版本就是2.8.9（我嘗試了一下反正2.9.x不支持）
使用fullpage 要引入fullpage.css, fullpage.js 這些git上都可以找到，cdn鏈接https://cdnjs.com/libraries/f...
并且2.x版本是依賴jQuery因此必須要引入jQuery
基礎(chǔ)的準(zhǔn)備好了就可以使用fullpage了
html
// 每一屏使用section的類(lèi)名 // 水平滾動(dòng)分兩屏整個(gè)視口自動(dòng)高度// fp-auto-height 加入該類(lèi)名后這一屏就不會(huì)是100%的高度了可以自定義高度，在這個(gè)div中加入一個(gè)div去控制高度
fullpage 的水平滾動(dòng)幻燈片切換的只能通過(guò)小圓點(diǎn)或者左右箭頭去控制切換，不能實(shí)現(xiàn)自動(dòng)輪播，要想實(shí)現(xiàn)自動(dòng)輪播需要使用其他的插件比如swiper等
js
$(document).ready(function() {
$("#fullpage").fullpage({
controlArrows: false, // 確定是否將幻燈片的控制箭頭向右或向左移動(dòng), 左右箭頭
slidesNavigation: true // 小圓點(diǎn)
});
});
這里 #fullpage 是最外層包裹的盒子ID
當(dāng)然如果你所有的屬性都用默認(rèn)的那可以不傳遞值
$(document).ready(function() {
$("#fullpage").fullpage();
});
這里就可以跑起來(lái)了，實(shí)現(xiàn)了一個(gè)整平滾動(dòng)的demo
這里需要注意的是，如果將初始化的js代碼寫(xiě)著HTML后面會(huì)出現(xiàn)閃動(dòng)現(xiàn)象個(gè)人見(jiàn)解，僅做參考
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/110046.html
摘要：原生實(shí)現(xiàn)全屏滾動(dòng)點(diǎn)擊箭頭，實(shí)現(xiàn)下一頁(yè)滾輪事件上滑下滑滾動(dòng)到對(duì)應(yīng)頁(yè)定時(shí)器解決函數(shù)連續(xù)執(zhí)行頁(yè)面滾動(dòng)，導(dǎo)航對(duì)應(yīng)變化點(diǎn)擊導(dǎo)航，頁(yè)面滾動(dòng)部分全屏滾動(dòng)第頁(yè)第頁(yè)第頁(yè)第頁(yè)第頁(yè)下三角部分容器全屏滾動(dòng)容器全屏滾動(dòng)下一頁(yè)和部分圖片 原生js實(shí)現(xiàn)全屏滾動(dòng) fullPage.js function fullPage() { const fullPage = document.getEleme...
原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗(yàn)貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗(yàn)，但是AlloyTouch.FullPag...
閱讀 1850·2021-11-24 09:39
閱讀 1778·2021-11-22 15:22
閱讀 1140·2021-09-27 13:36
閱讀 3500·2021-09-24 10:34
閱讀 3536·2021-07-26 23:38
閱讀 2703·2019-08-29 16:44
閱讀 1040·2019-08-29 16:39
閱讀 1197·2019-08-29 16:20
