FullPage外掛功能介紹

外掛功能介紹

• 基於 jQuery 的外掛，它能夠幫你很方便、很輕鬆的製作出全屏網站。
• 支援滑鼠滾動，支援前進後退和鍵盤控制，多個回撥函式，
  支援手機、平板觸控事件，支援 CSS3 動畫，支援視窗縮放，視窗縮放時自動調整，
  可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等等。
• 參考文件：http://www.dowebok.com/demo/2014/77/
• 原理：window.onmousewheel = function(){ console.log(‘ok’) };

基本應用

- 引入檔案

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

- 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>

- js初始化

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

配置

方法

回撥函式

注

此版本是2.82版本，最新版本可能會有一些細節上的變動，詳情請關注GitHub上的最新文件，
在後一篇部落格我將用FullPage做一個全屏動畫的活動頁