jquery插件－fullpage.js

1⃣️ 簡介

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

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

2⃣️ 相容性

jQuery 相容

相容 jQuery 1.7+。

瀏覽器相容

3⃣️ 使用方法

1、引入文件

css部分
<link rel="stylesheet" href="jquery.fullPage.css">

js部分
<script src="jquery.min.js"></script>

<!-- jquery.easings.min.js 用於 easing 參數，也可以使用完整的 jQuery UI 代替，如果不需要設置 easing 參數，可去掉改文件 -->
<script src="jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 設置為 true，則需要引入 iscroll.js，一定要在fullpage.js之前引入,否則會報錯 -->
<script src="iscroll.js"></script>

<script src="jquery.fullPage.js"></script>

2、HTML

<div id="fullpage">
    <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="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(){
    $('#dowebok').fullpage();
});

4⃣️ 配置

1、選項

2、方法

3、回調函數