Demo | 官網

經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。

fullPage.js 是一個基於jQuery 的插件,它能夠很方便、很輕鬆的製作出全屏網站,主要功能有:

  • 支持鼠標滾動 * 支持前進後退和鍵盤控制
  • 多個回調函數
  • 支持手機、平板觸摸事件
  • 支持CSS3 動畫
  • 支持窗口縮放
  • 窗口縮放時自動調整
  • 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

兼容性

jQuery 兼容
兼容jQuery 1.7+。

瀏覽器兼容

使用方法

  1. 引入文件

    <link rel="stylesheet" href="/css/jquery.fullPage.css">
    <script src="/js/jquery.min.js"></script>
    
    <!-- jquery.easings.min.js 用於easing 參數,也可以使用完整的jQuery UI 代替,如果不需要設置easing 參數,可去掉改文件-->
    <script src="/js/jquery.easings.min.js"></script>
    
    <!-- 如果scrollOverflow 設置為true,則需要引入jquery.slimscroll.min.js,一般情況下不需要-->
    <script src="/js/jquery.slimscroll.min.js"></script>
    
    <script src="/js/jquery.fullPage.js"></script>
  2. HTML

    <div id="dowebok">
        <div class="section">
            <h3>第一屏</h3>
        </div>
        <div class="section">
            <h3>第二屏</h3>
        </div>
        <div class="section">
            <h3>第三屏</h3>
        </div>
        <div class="section">
            <h3>第四屏</h3>
        </div>
    </div>

    每個section 代表一屏,默認顯示"第一屏",如果要指定加載頁面時顯示的"屏幕",可以在對應的section 加上class="active",如:

    <div class="section active">第三屏</div>

    同時,可以在section 內加入slide,如:

    <div id="dowebok">
        <div class="section">第一屏</div>
        <div class="section">第二屏</div>
        <div class="section">
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
            <div class="slide">第三屏的第四屏</div>
        </div>
        <div class="section">第四屏</div>
    </div>
  3. JavaScript

    $(function(){
        $('#dowebok').fullpage();
    });

配置

  1. 選項

    選項 類型 默認值 說明
    verticalCentered 字符串 true 內容是否垂直居中
    resize 布爾值 false 字體是否隨著窗口縮放而縮放
    slidesColor 函數 設置背景顏色
    anchors 數組 定義錨鏈接
    scrollingSpeed 整數 700 滾動速度,單位為毫秒
    easing 字符串 easeInQuart 滾動動畫方式
    menu 布爾值 false 綁定菜單,設定的相關屬性與anchors 的值對應後,菜單可以控制滾動
    navigation 布爾值 false 是否顯示項目導航
    navigationPosition 字符串 right 項目導航的位置,可選left 或right
    navigationColor 字符串 #000 項目導航的顏色
    navigationTooltips 數組 項目導航的tip
    slidesNavigation 布爾值 false 是否顯示左右滑塊的項目導航
    slidesNavPosition 字符串 bottom 左右滑塊的項目導航的位置,可選top 或bottom
    controlArrowColor 字符串 #fff 左右滑塊的箭頭的背景顏色
    loopBottom 布爾值 false 滾動到最底部後是否滾回頂部
    loopTop 布爾值 false 滾動到最頂部後是否滾底部
    loopHorizo​​ntal 布爾值 true 左右滑塊是否循環滑動
    autoScrolling 布爾值 true 是否使用插件的滾動方式,如果選擇false,則會出現瀏覽器自帶的滾動條
    scrollOverflow 布爾值 false 內容超過滿屏後是否顯示滾動條
    css3 布爾值 false 是否使用CSS3 transforms 滾動
    paddingTop 字符串 0 與頂部的距離
    paddingBottom 字符串 0 與底部距離
    fixedElements 字符串
    normalScrollElements
    keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航
    touchSensitivity 整數 5
    continuousVertical 布爾值 false 是否循環滾動,與loopTop 及loopBottom 不兼容
    animateAnchor 布爾值 true
    normalScrollElementTouchThreshold 整數 5
  2. 方法

    名稱 說明
    moveSectionUp() 向上滾動
    moveSectionDown() 向下滾動
    moveTo(section, slide) 滾動到
    moveSlideRight() slide 向右滾動
    moveSlideLeft() slide 向左滾動
    setAutoScrolling() 設置頁面滾動方式,設置為true 時自動滾動
    setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制
    setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
    setScrollingSpeed() 定義以毫秒為單位的滾動速度

您也可能喜歡這些文章

Copyright © 2018 ucamc