1.前言

　　全屏大圖、簡約風的網頁給人第一印象就是高端大氣上檔次，很多手機廠商的手機宣傳頁面都是采用了這種設計風格，蘋果的官網更是體現的淋漓盡致（栗子?）。

　　fullPage.js就是專門為此而打造的支持全屏頁面動態滾動的插件，先貼個瀏覽器兼容圖：

　　查看演示：一睹為快?

　　主要特性：

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

2.用法

　　在這裏介紹最簡單的用法：

　　（1）引入文件

　　這裏註意下載最新的fullPage插件，因為某些參數在版本更新過程中可能略有改動。

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

　　（1）HTML：為每個需要全屏顯示的div添加class=" section "，如果要指定初始加載頁面時要顯示的模塊，可以在對應的 section 追加 class=”active”。

在section中添加slide則會顯示左右滾動的效果（幻燈片）。

 1 <div id="fullPage">
 2     <
 
div class="section active">第一屏</div>
 3     <div class="section">第二屏</div>
 4     <div class="section">
 5         <div class="slide">第三屏的第一屏</div>
 6         <div class="slide">第三屏的第二屏</div>
 7         <div class="slide">第三屏的第三屏</div>
 8         <div class="slide">第三屏的第四屏</div>
 9     </div>
10     <div class="section">第四屏</div>
11 </div>

　　（2）JavaScript：

1 $(function(){
2     $(‘#dowebok‘).fullpage();
3 });

　　這樣最基本的全屏滾動效果就實現了，當然fullPage有很多參數和回調可以修改，下面放上鏈接。這裏提醒一下，如果要使用裏面的easing參數，需要同時將參數css3設置為false ；如果不需要滾動全屏，只有半屏的話可以在section後追加class：fp-auto-height 。

　　具體API可以參考 鏈接?

fullPage.js—全屏動態滾動插件