About the Download

如今我們經常能見到全屏網站,尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如 iPhone 5C 的介紹頁面(查看),QQ瀏覽器的官網站。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試 fullPage.js。

主要功能有:

支持鼠標滾動

支持前進后退和鍵盤控制

多個回調函數

支持手機、平板觸摸事件

支持 CSS3 動畫

支持窗口縮放

窗口縮放時自動調整

可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等

使用方法
1、引入文件

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

<!-- jquery.easings.min.js 是必須的,用于 easing 參數,也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>

<!-- 如果 scrollOverflow 設置為 true,則需要引入 jquery.slimscroll.min.js,一般情況下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>

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

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

3、JavaScript

$(function(){
?? ?$('#fullpage').fullpage();
});
CNY 3.00 – 購買