fullpage使用

pkwenda 發布于2019-08-26 14:06 / 1067人閱讀

摘要：的地址首先已經更新到版本了，并且從版本摒棄了的依賴，并且之前多種語言對開發者友好。但是為了兼容不能使用版本，只能使用版本及其以下，雖然說兼容但是實際上并沒有兼容。

fullpage的git地址

首先fullpage 已經更新到3.x版本了，并且從3.x版本摒棄了jQuery的依賴，并且之前多種語言對開發者友好。
但是為了兼容ie8不能使用3.x版本，只能使用2.8.9版本及其以下，雖然2.9.x說兼容ie8但是實際上并沒有兼容。因此想要兼容ie8最高版本就是2.8.9（我嘗試了一下反正2.9.x不支持）

使用fullpage 要引入fullpage.css, fullpage.js 這些git上都可以找到，cdn鏈接https://cdnjs.com/libraries/f...

并且2.x版本是依賴jQuery因此必須要引入jQuery

基礎的準備好了就可以使用fullpage了

html


     // 每一屏使用section的類名
         // 水平滾動分兩屏
        
    
    
    
    整個視口
    自動高度 // fp-auto-height 加入該類名后這一屏就不會是100%的高度了可以自定義高度，在這個div中加入一個div去控制高度

fullpage 的水平滾動幻燈片切換的只能通過小圓點或者左右箭頭去控制切換，不能實現自動輪播，要想實現自動輪播需要使用其他的插件比如swiper等

$(document).ready(function() {
  $("#fullpage").fullpage({
    controlArrows: false, // 確定是否將幻燈片的控制箭頭向右或向左移動, 左右箭頭
    slidesNavigation: true // 小圓點
  });
});

這里 #fullpage 是最外層包裹的盒子ID
當然如果你所有的屬性都用默認的那可以不傳遞值

$(document).ready(function() {
  $("#fullpage").fullpage();
});

這里就可以跑起來了，實現了一個整平滾動的demo

這里需要注意的是，如果將初始化的js代碼寫著HTML后面會出現閃動現象

個人見解，僅做參考

云服務器 GPU云服務器 fullpage fullpage.js fullpage固定導航 https使用oos使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110046.html

原生js實現全屏滾動--fullPage

摘要：原生實現全屏滾動點擊箭頭，實現下一頁滾輪事件上滑下滑滾動到對應頁定時器解決函數連續執行頁面滾動，導航對應變化點擊導航，頁面滾動部分全屏滾動第頁第頁第頁第頁第頁下三角部分容器全屏滾動容器全屏滾動下一頁和部分圖片原生js實現全屏滾動 fullPage.js function fullPage() { const fullPage = document.getEleme...

yuanzhanghu 2019-08-23 15:07 評論0 收藏0
AlloyTouch全屏滾動插件發布--30秒搞定順滑H5頁

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 評論0 收藏0