Fullpage 外掛配置項
外掛描述：fullPage.js 是一個基於 jQuery 的外掛，它能夠很方便、很輕鬆的製作出全屏網站。
如今我們經常能見到全屏網站，尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景，再新增一些簡單的內容，主要是動畫，顯得格外的高階大氣上檔次。比如 iPhone 5C 的介紹頁面（檢視網址 http://www.jq22.com/demo/fullpage-141201214949/index8.html#page2）。如果你也希望你的網站能設計成全屏的，顯得更上檔次，你可以試試 fullPage.js。
主要功能有：
- 支援滑鼠滾動
- 支援前進後退和鍵盤控制
- 多個回撥函式
- 支援手機、平板觸控事件
- 支援 CSS3 動畫
- 支援視窗縮放
- 視窗縮放時自動調整
可設定滾動寬度、背景顏色、滾動速度、迴圈選項、回撥、文字對齊方式等等
我利用fullpage.js模仿百度輿情完成的全屏輪播網站網址https://xuanrandeyimojingjin.github.io/baiduyuqing/，初學時的作品，謹供大家看一下效果，有興趣的可以自己動手設計自己的全屏網站！
jQuery外掛
外掛呼叫
<ul id="lunbo">
<li>...</li>
<li>... jQuery外掛檔案
(function($){
var lunbo = function () cdn (content deliver network) 內容分發網路
如果百度使用了某個 cdn中的jquery.js,而且使用者開啟過百度, 我們自己同樣使用了 同一個 cdn中的jquery.js, 使用者開啟我們的網頁時使用瀏覽器快取中的jquery.js.
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/index.css">
<script src="https://cdn.boot.com/jquery.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
</body>
</html>fullpage 外掛基本使用
<link rel="stylesheet" href="jquery.fullPage.css" media="screen" title="no title" charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>
<script>
$(function(){
$('#fullpage').fullpage({
//這裡是配置項
});
})
</script>
<div id="fullpage">
<div class="section" id="section-1">
<div class="slide"> </div>
<div class="slide"> </div>
</div>
<div class="section" id="section-2"></div>
<div class="section" id="section-3"></div>
</div>每滾動一屏，會給當前section加上 active class
所以我們可以寫出類似下面這樣的 scss 檔案來操控動畫
#section1{
h1{
/**/
}
h2{
transition: /**/
}
}
#section1.active{
h1{
animation:/**/
}
h2{
/**/
}
}外掛配置項
- sectionsColor
一個數組 規定了各個section的顏色
- verticalCentered
每一頁的內容是否垂直居中，預設值為true
- resize
字型大小是否隨視窗縮放而縮放 預設值為false
- scrollingSpeed
滾動速度,預設為700毫秒
- anchors
給每個section定義錨鏈接
- lockAnchors
是否鎖定錨鏈接
- active class
預設顯示哪個section
- easing
定義頁面section滾動的動畫方式 設定這個值需要引入jquery.easings 外掛
- css3
預設為true,使用css3 transform 來實現頁面滾動動畫
- loopTop
滾動到最頂部後是否連續滾動到底部，預設值為false
- loopBottom
滾動到最底部後是否連續滾動回頂部 預設值為false
- loopHorizontal
橫向slide幻燈片是否迴圈滾動，預設值為true
- autoScrolling
是否使用外掛的滾動方式，預設值為true, 如果設定為false,則會出現瀏覽器自帶的滾動條
- scrollBar
是否包含滾動條，預設值為false 如果設定為true,則瀏覽器自帶的滾動條出現 頁面滾動時還是頁滾動，但是滾動條的預設行為也效果
- paddingTop paddingBottom
設定每一個section頂部和底部的padding，預設值為0 如果我們需要設定一個固定在頂部或者底部的選單，導航，元素等，可以使用這兩個配置項
- fixedElements
普通方式書寫的固定定位元素會被外掛覆蓋 需要我們通過指定這個屬性才會生效，引數為一個jquery選擇器
- keyboardScrolling
是否可以使用鍵盤方向鍵導航，預設值為true
- touchSensitivity
在移動裝置中滑動頁面的敏感性，預設為5，按百分比衡量，越大則越難滑動
- continuousVertical
是否迴圈滾動，預設值為false，如果設定為true,則頁面會迴圈滾動， 不像loopTop loopBottom那樣出現跳動 這個屬性和loopTop loopBottom 不相容 不要同時設定
- animateAnchor
錨鏈接是否可以控制滾動動畫，預設為true。如果設定為false,則通過錨鏈接定位到某個頁面顯示不再有動畫
- recordHistory
是否記錄歷史,預設為true,可以記錄頁面滾動的地址 通過瀏覽器前進和後退按鈕來導航
- menu
繫結選單，設定的相關屬性與anchors的值對應後，選單可以控制滾動，預設值為 false 可以設定為選單的jquery選擇器
<ul id="fullpageMenu">
<li data-menuanchor="page1"><a href="#page1">1</a</li>
.....
</ul>- navigation
是否顯示導航，預設false 如果設定為true 會顯示小圓點，作為導航
- navigationPosition
導航小圓點位置，可以設定為left或者right
- navigationTooltips
導航小圓點的tooltips設定，預設為[],按照順序放置
- showActiveTooltip
是否顯示當前頁面的導航的tooltip資訊，預設為false
- slidesNavigation
是否顯示橫向幻燈片的導航，預設值為false
- slidesNavPosition
橫向幻燈片導航的位置，預設為bottom 可以設定為top
- controlArrows
定義是否通過箭頭來控制slide幻燈片,預設值為true 在移動裝置上可以通過滑動來操作幻燈片
- scrollOverflow
內容超過滿屏後是否顯示滾動條，預設為false. 如果設定為true,則會顯示滾動條 如果要滾動檢視內容，還需要jquery.slimscroll外掛，該外掛主要用於模擬傳統的瀏覽器滾動條
- sectionSelector
section的選擇器，預設為.section
- slideSelector
slide的選擇器 預設為.slide.
配置項中的回撥函式
- afterLoad(anchorLink,index)
滾動到某一section，且滾動結束後，會觸發一次此回撥函式，函式接收 anchorLink 和index 兩個引數， anchorLink 是錨鏈接的名稱 index 是序號 從1開始計算 可以根據 anchorLink 和 index的引數值判斷觸發相應的事件
- onLeave(index,nextIndex,direction)
離開一個section時觸發，通過return false可以取消滾動 離開的序號 到達的序號 滾動的方向
- afterRender()
頁面結構生成之後的回撥函式
- afterResize()
瀏覽器視窗尺寸改變之後的回撥函式
- afterSlideLoad()
滾動到某一個幻燈片後的回撥函式
- onSlideLeave
離開一個slide之後的回撥函式
$.fn.fullpage 物件中的方法介紹
moveSectionUp()
moveSectionDown()
$('#movedown').on('click',function(){
$.fn.fullpage.moveSectionDown();
})- moveTo(section,slide)
滾動到第幾頁，第幾個幻燈片，注意，頁面從1開始，而幻燈片從0開始
- silentMoveTo(section,slide)
滾動到第幾頁，和moveTo一樣，但是沒有動畫效果
- moveSlideRight()
幻燈片向右滾動
- moveSlideLeft()
幻燈片向左滾動
setAutoScrolling()
setLockAnchors()
setRecordHistory()
setScrollingSpeed()
setAllowScrolling(boolean,[directions])
新增或刪除滑鼠滾輪/滑動控制，第一個引數true為啟用，false 為禁用 後面的引數為方向，取值包含 all,up,down,left,right,可以使用多個，逗號隔開
- destory(type)
銷燬fullpage特效，type可以不寫，或者使用all,不寫type,fullpage給頁面新增的樣式和html元素還在 如果使用all,則樣式 html等全部銷燬
- reBuild()
重新更新頁面和尺寸，用於通過ajax請求後改變了頁面結構之後，重建效果
~END~
我是渲染的一抹寂靜
追求自由 獨立 簡單 努力做一個熱愛生活 珍惜生命的人
白天是個哼次哼次敲程式碼的程式猿，晚上是讀書，健身，享受生活的自由者。
如果你喜歡我的文字和內容，關注我，一起加油 一起進步 不定期更文，我等你來哦！