FullPageAPI

fullpage配置項

  • 調用fullpage.js
    $('#fullpage').fullpage()

  • sectionSelector
    section的選擇器,默認為.section。

  • slideSelector
    slide的選擇器,默認為.slide。

  • sectionsColor
    可以為每個section設置background-color屬性。

  • controlArrows
    定義是否通過箭頭來控制slide幻燈片,默認為true。
    設置為false時,幻燈片兩側箭頭消失,移動設備上,可通過滑動來操作幻燈片。

  • verticalCentered
    每一頁的內容是否垂直居中,默認為true。

  • resize
    字體是否隨著窗口縮放而縮放,默認為false。

  • scrollingSpeed
    設置滾動速度,單位是毫秒,默認為700。

  • anchors
    定義錨鏈接,默認值為[],有了錨鏈接,用戶就可以快速打開定位到某一頁面。
    定義錨鏈接的時候,值不要和頁面中任意的id或name相同,而且定義時,不需要加#。

  • lockAnchors
    是否鎖定錨鏈接,默認為false。如果設置為true,那么定義的錨鏈接也就是anchors無效。

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

  • easing
    定義頁面滾動的動畫方式,如果修改此項,需要引入jquery.easings插件,或者jquery.ui。

  • css3
    是否使用css3 transform 來實現滾動效果,默認為true。
    設置為false時,使用jQuery動畫來實現滾動。

  • loopTop
    滾動到最頂部后是否連續滾動到底部,默認為false。

  • loopBottom
    滾動到最底部后是否連續滾動回頂部,默認為false。

  • continuousVertical
    是否循環滾動,默認為false。設置為true時,頁面循環滾動。
    和loopTop/loopBottom不兼容,不能同時設置。

  • loopHorizontal
    橫向slide幻燈片是否循環滾動,默認為true。

  • autoScrolling
    是否插件的滾動方法,默認為true。
    設置為false時,會出現瀏覽器自帶的滾動條,將不會按頁滾動,而是按照滾動條的默認方式。

  • recordHistory
    是否記錄歷史,默認為true,可以記錄頁面滾動的歷史,通過瀏覽器的前進后退來導航。
    如果autoScrolling: false,那么這個設置也將被關閉,即設置為false。

  • scrollBar
    是否包含滾動條,默認為false。
    設置為true時,會出現瀏覽器自帶的滾動條,頁面還是按頁滾動,但滾動條默認行為也有效。

  • paddingTop/paddingBottom
    設置每個section頂部/底部的padding,默認為0。
    如果需要設置一個固定在頂部或底部的菜單、導航、元素等,可以使用這兩個配置項。

  • fixedElements
    頁面滾動時固定的元素,默認為null,需要配置一個jquery選擇器。
    頁面滾動時,fixedElements設置的元素固定不動。

  • keyboardScrolling
    是否可以使用鍵盤方向鍵導航,默認為true。

  • tochSensitivity
    在移動設備中滑動頁面的敏感性,默認為5,最大為100,越大越難滑動。

  • menu
    綁定菜單,設置的相關屬性與anchors的值對應后,菜單可以控制滾動,默認為false。
    可以設置為菜單的jquery選擇器。

  • navigation
    是否顯示導航,默認為false。設置為true時,會顯示小圓點作為導航。

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

  • navigationTooltips
    鼠標浮動到導航小圓點上時的文字提醒,默認為[],注意按照順序設置。

  • showActiveTooltip
    是否顯示當前頁面的導航文字提醒,默認為false。

  • slidesNavigation
    是否顯示橫向幻燈片的導航,默認為false。

  • slidesNavPosition
    橫向幻燈片導航的位置,默認為bottom,可以設置為top或bottom。

  • scrollOverflow
    內容超過滿屏后是否顯示滾動條,默認為false。
    設置為true時,則會顯示滾動條,如果要滾動查看內容,需要jquery.slimscroll插件。
    jquery.slimscroll主要用于模擬傳統瀏覽器滾動條。

fullpage方法

  • fullpage方法的使用方式:
    $.fn.fullpage.xxx()

  • moveSectionUp()
    向上滾動一頁。

  • moveSectionDown()
    向下滾動一頁。

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

  • silentMoveTo(section, slide)
    滾動到第幾頁,第幾個幻燈片,沒有動畫效果。

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

  • moveSlideLeft()
    幻燈片向在滾動。

  • setAutoScrolling(boolean)
    動態設置autoScrolling。

  • setLockAnchors(boolean)
    動態設置lockAnchors。

  • setRecordHistory(boolean)
    動態設置recordHistory。

  • setScrollingSpeed(milliseconds)
    動態設置scrollSpeed。

  • setAllowScrolling(boolean, [directions])
    添加或刪除滾輪/滑動控制,第一個參數為true時啟動,false為禁止。
    第二個參數為方向,取值包括:all、up、down、left、right,可以使用多個。

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

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

fullpage回調函數

  • afterLoad(anchorLink, index)
    滾動到某一section,且滾動結束后,觸發此回調函數。
    anchorLink是錨鏈接的名稱,index是序號,從1開始計算。
    可以根據anchorLink的index參數值的判斷,觸發相應的事件。

  • onLeave(index, nextIndex, direction)
    在我們離開一個section時,觸發此回調函數。
    index:離開頁面的序號,從1開始計算。
    nextIndex:目標頁面的序號,從1開始計算。
    direction:判斷往上滾動還是往下滾動,值是up或down。
    通過return false; 可以取消滾動。

  • afterSlideLoad(anchorLink, index, slideAnchor, slideIndex)
    滾動到某一個幻燈片后觸發此回調函數。

  • onSlideLeave(anchorLink, index, slideIndex, direction, nextSlideIndex)
    離開某一個幻燈片時觸發此回調函數。

  • afterRender()
    頁面初始化完成后觸發此回調函數。

  • afterResize()
    瀏覽器窗口改變后觸發此回調函數。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容