經常能見到單頁式使用選單滑動區塊的網站，我們稱為全屏滾動網站（也稱為單頁網站），尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再添加一些簡單的內容，顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面（查看）。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試fullPage.js。
fullPage.js 是一個基於jQuery 的插件，它能夠很方便、很輕鬆的製作出全屏網站，主要功能有：
- 支持鼠標滾動
* 支持前進後退和鍵盤控制 - 多個回調函數
- 支持手機、平板觸摸事件
- 支持CSS3 動畫
- 支持窗口縮放
- 窗口縮放時自動調整
- 可設置滾動寬度、背景顏色、滾動速度、循環選項、回調、文本對齊方式等等
兼容性
jQuery 兼容
兼容jQuery 1.7+。
瀏覽器兼容
使用方法
-
引入文件
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 用於easing 參數，也可以使用完整的jQuery UI 代替，如果不需要設置easing 參數，可去掉改文件--> <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> -
HTML
<div id="dowebok"> <div class="section"> <h3>第一屏</h3> </div> <div class="section"> <h3>第二屏</h3> </div> <div class="section"> <h3>第三屏</h3> </div> <div class="section"> <h3>第四屏</h3> </div> </div>每個section 代表一屏，默認顯示"第一屏"，如果要指定加載頁面時顯示的"屏幕"，可以在對應的section 加上class="active"，如：
<div class="section active">第三屏</div>同時，可以在section 內加入slide，如：
<div id="dowebok"> <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> -
JavaScript
$(function(){ $('#dowebok').fullpage(); });
配置
-
選項
選項 類型 默認值 說明 verticalCentered 字符串 true 內容是否垂直居中 resize 布爾值 false 字體是否隨著窗口縮放而縮放 slidesColor 函數 無 設置背景顏色 anchors 數組 無 定義錨鏈接 scrollingSpeed 整數 700 滾動速度，單位為毫秒 easing 字符串 easeInQuart 滾動動畫方式 menu 布爾值 false 綁定菜單，設定的相關屬性與anchors 的值對應後，菜單可以控制滾動 navigation 布爾值 false 是否顯示項目導航 navigationPosition 字符串 right 項目導航的位置，可選left 或right navigationColor 字符串 #000 項目導航的顏色 navigationTooltips 數組 空 項目導航的tip slidesNavigation 布爾值 false 是否顯示左右滑塊的項目導航 slidesNavPosition 字符串 bottom 左右滑塊的項目導航的位置，可選top 或bottom controlArrowColor 字符串 #fff 左右滑塊的箭頭的背景顏色 loopBottom 布爾值 false 滾動到最底部後是否滾回頂部 loopTop 布爾值 false 滾動到最頂部後是否滾底部 loopHorizontal 布爾值 true 左右滑塊是否循環滑動 autoScrolling 布爾值 true 是否使用插件的滾動方式，如果選擇false，則會出現瀏覽器自帶的滾動條 scrollOverflow 布爾值 false 內容超過滿屏後是否顯示滾動條 css3 布爾值 false 是否使用CSS3 transforms 滾動 paddingTop 字符串 0 與頂部的距離 paddingBottom 字符串 0 與底部距離 fixedElements 字符串 無 normalScrollElements 無 keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航 touchSensitivity 整數 5 continuousVertical 布爾值 false 是否循環滾動，與loopTop 及loopBottom 不兼容 animateAnchor 布爾值 true normalScrollElementTouchThreshold 整數 5 -
方法
名稱 說明 moveSectionUp() 向上滾動 moveSectionDown() 向下滾動 moveTo(section, slide) 滾動到 moveSlideRight() slide 向右滾動 moveSlideLeft() slide 向左滾動 setAutoScrolling() 設置頁面滾動方式，設置為true 時自動滾動 setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制 setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制 setScrollingSpeed() 定義以毫秒為單位的滾動速度