最近準備做一個全屏滾動的網頁，在網上搜了一堆教程，結果大多都是一些很籠統的使用方法，對我這種耐心不超過3秒的笨蛋來說，很晦澀很籠統，所以打算邊研究邊自己寫個教程，有什麽不懂的，我再回來翻看筆記也方便O(∩_∩)O哈哈~

經常看到一些全屏網站，看著就很高端大氣上檔次，想實際操作的話，可以試著使用fullpage.js這個基於jquery的插件，輕量又很方便。

功能：

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

兼容性：jquery支持jquery 1.7+，瀏覽器支持IE8+，Chrome，Firefox，Opera，Safari。

準備工作：

1、引入文件：

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

<script src="js/jquery.min.js"></script> <!--基於jquery-->

<!-- jquery.easings.min.js 可以支持更多動畫過渡的效果，用於 easing 參數，也可以用jQuery UI 代替，如果不需要，可去不要文件 -->

<script src="js/jquery.easings.min.js"></script>

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

檢查引入成功，就可以使用了fullpage.js這個插件了！

2、建立一個基本的頁面結構：

<div id="gufeibai">

　　<div class="section">第一屏</div>

　　<div class="section">第二屏</div>

　　<div class="section">第三屏</div>

　　<div class="section">第四屏</div>

　　<div class="section">第五屏</div>

</div>

每一個section都是一個頁面，包裹住所有的頁面的容器不能是body，可以任意命名一個id包裹住所有的section。

3、實現全屏滾動

<script>

　　$(function(){

　　　　$(‘#gufeibai‘).fullpage(); //激活fullpage的效果，可以檢查頁面看效果了

　　});　　

</script>

這個方法還可以有很多配置項，比如給多個頁面填充不同的背景顏色：$(‘#gufeibai‘).fullpage({ sectionsColor : [‘pink‘, ‘red‘, ‘green‘, ‘yellow‘, ‘write‘] });

試著看看效果吧，更多配置項看教程二~

fullpage.js簡單教程（一）