最近准備做一個全屏滾動的網頁，在網上搜了一堆教程，結果大多都是一些很籠統的使用方法，對我這種耐心不超過3秒的人來說，很晦澀很籠統，所以邊研究邊自己寫個教程，有什么不懂的，我再回來翻看筆記也方便O(∩_∩)O哈哈~
經常看到一些全屏網站，看着就很高端大氣上檔次，想實際操作的話，可以試着使用fullpage.js這個基於jquery的插件，輕量又很方便。
功能：
- 支持鼠標滾動
- 支持前進后退和鍵盤控制
- 多個回調函數
- 支持手機、平板觸摸事件
- 支持 CSS3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
兼容性：jquery支持jquery 1.7+，瀏覽器支持IE8+，Chrome，Firefox，Opera，Safari。
准備工作：
（1）引入文件：
1 <link rel="stylesheet" href="css/jquery.fullPage.css">
2 <script src="js/jquery.min.js"></script> <!--基於jquery-->
3 <!-- jquery.easings.min.js 可以支持更多動畫過渡的效果，用於 easing 參數，也可以用jQuery UI 代替，如果不需要，可去不要文件 -->
4 <script src="js/jquery.easings.min.js"></script>
5 <script src="js/jquery.fullPage.js"></script>
（2）建立一個基本的頁面結構：
每一個section都是一個頁面，包裹住所有的頁面的容器不能是body，可以任意命名一個id包裹住所有的section
1 <div id="gufeibai"> 2 <div class="section">第一屏</div> 3 <div class="section">第二屏</div> 4 <div class="section">第三屏</div> 5 <div class="section">第四屏</div> 6 <div class="section">第五屏</div> 7 </div>
（3）實現全屏滾動
1 <script>
2 $(function(){ 3 $('#gufeibai').fullpage(); //激活fullpage的效果，可以檢查頁面看效果了
4 }); 5 </script>
這個方法還可以有很多配置項，比如給多個頁面填充不同的背景顏色：
1 $('#gufeibai').fullpage({ sectionsColor : ['pink', 'red', 'green', 'yellow', 'write'] });
試着看看效果，更多配置項看教程二~