fullPage.js全屏滾動插件API

来源:https://www.cnblogs.com/sysg/archive/2018/03/23/8630075.html
-Advertisement-
Play Games

API sectionsColor:['green','orange','red','lime']; //設置背景顏色 可以為每一個section設置background-color屬性 controlArrows: 定義是否通過箭頭來控制slide幻燈片,預設為true,當我們設置為false,則 ...


API

  1. sectionsColor:['green','orange','red','lime'];
    //設置背景顏色
    可以為每一個section設置background-color屬性

  2. controlArrows:
    定義是否通過箭頭來控制slide幻燈片,預設為true,當我們設置為false,則幻燈片左右的箭頭消失,在移動端上我們可以通過滑動來控制幻燈片

  3. verticalCentered:
    每一頁的內容是否垂直居中,預設為true

  4. resize:
    字體是否隨著視窗縮放而縮放,預設為false

  5. scrollingSpeed:
    滾動速度,單位為毫秒,預設為700

  6. anchors:
    定義錨鏈接,預設值是[]。有了錨鏈接,用戶可以快速打開定位到某一頁面。
    註意定義錨鏈接的時候,值不要和頁面中任意的id或name相同,尤其在IE下,而且定義時不需要加#

  7. lockAnchors:
    是否鎖定錨鏈接,預設為false,若設置為true,則定義的錨鏈接就沒有效果,使用較少

  8. easing:
    定義頁面section滾動的動畫方式,預設為easeInOutCubic,如果修改則需引入jquery.easings插件,或者jquery ui.

  9. css3:
    是否使用CSS3 transforms來實現滾動效果,預設為true。可提高支持css3的瀏覽器(如移動設備等的速度),若瀏覽器不支持css3,則會使用jquery來代替css3實現滾動效果。(傳說中的優雅降級)

  10. loopTop:
    滾動到最頂部後是否連續滾動到底部,預設false

  11. loopBottom:
    滾動到最底部後是否連續滾動回頂部,預設false

  12. loopHorizontal:
    橫向slide幻燈片是否迴圈滾動,預設為true

  13. autoScrolling:
    是否使用插件的滾動方式,預設為true,變為false則會出現瀏覽器自帶的滾動條,將不會按頁滾動,而是按照滾動條的預設行為來滾動

  14. scrollBar:
    是否包含滾動條,預設為false。設置為true,則出現瀏覽器自帶的滾動條,頁面滾動還是按頁滾動,但滾動條的預設行為也有效

  15. paddingTop/paddingBottom:
    設置每一個section頂部和底部的padding,預設都是0。一般如果需要設置一個固定在頂部或者底部的菜單、導航、元素等,可以使用這兩個配置項。

  16. fixedElements:
    固定的元素,預設為null,需要配置一個jquery選擇器。在頁面滾動的時候,fixedElements設置的元素固定不動。

  17. keyboardScrolling:
    是否可以使用鍵盤方向鍵導航,預設為true。

  18. touchSensitivity:
    在移動設備中滑動頁面的敏感性,預設為5,是按百分比來衡量,最高為100,越大滑動越難

  19. continuousVertical:
    是否迴圈滾動,預設為false。如果為true,則頁面會迴圈滾動,它不會像loopTop和loopBottom那樣出現跳動。
    (它和loopTop、loopBottom不相容,不要同時設置)

  20. animateAnchor:
    錨鏈接是否可以控制滾動動畫,預設為true。若為false,則通過錨鏈接定位到某個頁面顯示不再有動畫效果。

  21. recordHistory:
    是否記錄歷史,預設true。可以記錄頁面滾動的歷史,通過瀏覽器的前進後退來導航。

    如果設置了autoScrolling:false,那麼這個配置也將被關閉。

  1. menu:
    綁定菜單,設定的相關屬性與anchors的值對應後,菜單可以控制滾動,預設為false。可以設置為菜單的jquery選擇器。

  2. navigation:
    是否顯示導航,預設false。若為true,會顯示小圓點作為導航

  3. navigationPosition:
    導航小圓點的位置,可以設置為left或者right。

  4. navigationTooltips:
    導航小圓點的tooltips設置,預設為[],註意按照順序設置。

  5. showActiveTooltip:
    是否顯示當前頁面的導航的tooltip信息,預設為false

  6. slidesNavigation:
    是否顯示橫向幻燈片的導航,預設為false

  7. slidesNavPosition:
    橫向幻燈片導航的位置,預設為bottom,可以設置為top或bottom

  8. scrollOverflow:
    內容超過滿屏後是否顯示滾動條,預設為false.若設置為true,則會顯示滾動條,如果要滾動查看內容,還需要jquery.slimscroll插件的配合。slimscroll插件主要用於模擬傳統的瀏覽器滾動條。

  9. sectionSelector:
    section的選擇器,預設為.section。

  10. slideSelector:
    slide的選擇器,預設為.slide。

方法

  • moveSectionUp():
    向上滾動一頁。

  • moveSectionDown():
    向下滾動一頁。

  • moveTo(section,slide):
    滾動到第幾頁,第幾個幻燈片,註意:頁面是從1開始,而幻燈片是從0開始。

  • silentMoveTo(section,slide):
    滾動到第幾頁,和moveTo一樣,但沒有動畫效果。

  • moveSlideRight():
    幻燈片向右滾動。

  • moveSlideLeft():
    幻燈片向左滾動。

  • setAutoScrolling(boolean):動態設置autoScrolling

  • setLockAnchors(boolean):動態設置lockAnchors

  • setRecordHistory(boolean):動態設置recordHistory

  • setScrollingSpeed(milliseconds):動態設置scrollingSpeed

  • setAllowScrolling(boolean,[directions]):
    添加或刪除滑鼠滾輪/滑動控制,第一個參數true為啟用,false為禁用,後面的參數為方向,取值包含:all,up,down,left,right,可以使用多個,逗號分隔。

  • destroy(type):
    銷毀fullpage特效,type可以不寫,或者使用all,不寫type,fullpage給頁面添加的樣式和html元素還在,如果使用all,則樣式、html等全部銷毀,頁面恢復和不使用fullpage相同的效果。

  • reBuild():
    重新更新頁面和尺寸,用於通過ajax請求後改變了頁面結構之後,重建效果。

Lazy Loading

  • 圖片:
    <img data-src="image.png">
  • 視頻:
    <video>
        <source data-src="video.webm" type="video/webm"/>
        <source data-src="video.mp4" type="video/mp4"/>
    </video>

    用data-src代替src就可以實現延遲載入圖片。

回調函數

  • afterLoad(anchorLink,index)
    滾動到某一section,且滾動結束後,會觸發一次此回調函數,函數接收 anchorLink 和 index 兩個參數, anchorLink 是錨鏈接的名稱, index 是序號,從1開始計算。

    我們可以根據 anchorLink 和 index 參數值的判斷,觸發相應的事件。

  • onLeave(index,nextIndex,direction)
    在我們離開一個 section 時,會觸發一次此回調函數,接收 index 、 nextIndex 和 direction 3個參數:

    index是離開的“頁面”的序號,從1開始計算;
    nextIndex是滾動到的目標“頁面”的序號,從1開始計算;
    direction判斷往上滾動還是往下滾動,值是 up 或 down。
    

    通過return false;可以取消滾動

  • afterRender()
    頁面結構生成後的回調函數,或者說頁面初始化完成後的回調函數

  • afterResize()
    瀏覽器視窗尺寸改編後的回調函數

  • afterSlideLoad(anchorLink,index,slideAnchor,slideIndex)
    滾動到某一幻燈片後的回調函數,與afterLoad類似。

  • onSlideLeave(anchorLink,index,slideIndex,direction,nextSlideIndex)
    在我們離開一個slide時,會觸發一次此回調函數,與onLeave類似。





您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 上圖為網易雲盾的滑動拼圖驗證碼,其應該有一個專門的圖片庫,裁剪的位置是固定的。我的想法是,隨機生成圖片,隨機生成位置,再用canvas裁剪出滑塊和背景圖。下麵介紹具體步驟。 首先隨便找一張圖片渲染到canvas上,這裡 canvas作為畫布, block作為裁剪出來的小滑塊。 下麵考慮如何裁剪出拼圖 ...
  • 1、JavaScript文件引入方式 (1)正常引入 (2)defer (3)async 2、區別(主要是js載入,js執行,DOM解析區別) 註意: async 的腳本並不保證按照指定它們的先後順序執行 ...
  • var Dictionary = (function (){ var f = function(){ this._items = {}; }; var proto = f.prototype; proto.has = function(key){ return key in this... ...
  • web前端工程師是近幾年才發展出來的新興職業,也是目前火爆且高薪的職業。大需求的市場環境下,出現了越來越多的人群轉行做web前端工程師,如設計師、後臺程式員、網蟲、大學其他專業、策劃、編輯等等。 要學習web前端開發,需要掌握哪些知識呢? 1HTML 這個是最簡單的,也是最基礎的。要熟練掌握div、 ...
  • 頁面顯示效果,如下圖: 主頁面代碼: 跳轉頁面代碼: ...
  • 問題 react native版本 0.53.3 react native splash screen版本 3.0.6 一切配置妥當後出現如下問題: 在android studio里的調試報錯為 原因 react native splash screen版本 3.0.1 和 3.0.6 有所不同 差 ...
  • 在典型的面向對象的語言中,如java,都存在類(class)的概念,類就是對象的模板,對象就是類的實例。但是在Javascript語言體系中,是不存在類(Class)的概念的,javascript中不是基於‘類的',而是通過構造函數(constructor)和原型鏈(prototype chains ...
  • // ajax的倆個版本: var xmlhttp; if(window.xmlHttpRequest){ xmlhttp = new xmlHttpRequest(); }else{ xmlhttp = new Activexobjext("Microsoft.xmlhttp"); } // 向服 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...