fullpage.js簡單教程（一）

標籤：src   研究   page   UI   rom   全屏   span   顏色   func   

最近準備做一個全屏滾動的網頁，在網上搜了一堆教程，結果大多都是一些很籠統的使用方法，對我這種耐心不超過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簡單教程（一）