jQuery全屏滾動插件FullPage.js中文幫助API

查看原文

http://www.ibloger.net/article/425.html

簡介

fullPage.js是一個基於jQuery的全屏滾動插件,它能夠很方便、很輕鬆的製作出全屏網站。有很多網站都做了全屏滾動的特效,效果也很好看,今天就給大家說說fullPage.js的使用方法和設置。

這裏寫圖片描述


主要功能

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

兼容性

fullPage.js 支持 IE8+ 及其他現代瀏覽器。

使用方法

1、引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <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(){
    $('#fullpage').fullpage({
        'verticalCentered': false,
        'css3': true,
        'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        'navigation': true,
        'navigationPosition': 'right',
        'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
    })
})

經測試,最好至少有 anchors 這個參數,否則在火狐瀏覽器中,第一次滾動會直接滾到底部。可能是版本問題,以後版本可能會有修復

點擊這裏查看上面代碼的示例:http://www.uedsc.com/wp-content/uploads/2015/02/fullpage-demo/

配置

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 滾動到最頂部後是否滾底部
loopHorizontal 布爾值 true 左右滑塊是否循環滑動
autoScrolling 布爾值 true 是否使用插件的滾動方式,如果選擇 false,則會出現瀏覽器自帶的滾動條
scrollOverflow 布爾值 false 內容超過滿屏後是否顯示滾動條
css3 布爾值 false 是否使用
paddingTop 字符串 0 與頂部的距離
paddingBottom 字符串 0 與底部距離
fixedElements 字符串
normalScrollElements
keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航
touchSensitivity 整數 5
continuousVertical 布爾值 false 是否循環滾動,與 loopTop 及
animateAnchor 布爾值 true
normalScrollElementTouchThreshold 整數 5

2、方法

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

3、回調函數

這裏寫圖片描述

如何獲取

官方網站 | 下載地址 | fullPage.js GitHub 地址:https://github.com/alvarotrigo/fullPage.js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章