- fullpage簡介
1.功能
2.獲取
- fullpage引入和結構
1.引入
使用了cdn在線代碼庫
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/vendors/jquery.easings.min.js"></script>(可選，若需要更多的動畫效果)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
2.結構
基本的頁面結構
section:每一屏（頁）
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
給某一個section（頁）增加slide（幻燈片）
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
3.激活fullpage效果
$(document).ready(function(){
$('#fullpage').fullpage();
});
- fullpage配置項
sectionsColor:['','','',''],//分別為各個section設置背景顏色
controlArrows： ，默認為true，定義是否通過箭頭來控制slide，當我們設置為false,則幻燈片左右兩側的箭頭就會消失，在移動設備上，我們可以通過滑動來操作幻燈片
vertical： ，默認為true，每一頁的內容是否垂直居中；
resize： ，默認為false，字體是否隨着窗口縮放而縮放；
scrollingSpeed： ，滾動速度，單位為毫秒，默認為700；
anchors：['page1','','',''],定義錨鏈接，使每個section在地址欄有不同地址，便於直接找到某一section
lockAnchors: ,默認為false，若為true，則所添加的anchors不會自動在地址欄生效，需手動在地址欄地址后面加上自己的命名
}）；
easing： ，定義頁面section的滾動方式，默認為easeInOutCubic，如果修改此項需引入jquery.easings插件或 jquery ui，
css3： ，是否使用css3 transforms來實現滾動效果，默認為true，可以提供支持css3的瀏覽器，比如移動設備等的速度
loopTop： ，滾動到頂部后是否連續滾動到底部，默認為false；
loopBottom： ，滾動到底部以后是否連續滾動到頂部，默認為false；
loopHorizontal： ，橫向slide是否循環滾動，默認為true；
autoScrolling： ，是否使用插件的滾動方式，默認為true，，如果為false，則會出現瀏覽器的滾動條，將不會按頁滾動，而是按照滾動條的行為來滾動。
scrollBar： ，是否包含滾動條，默認為false，如果設置為true，則按頁滾動與滾動條滾動均有效
paddingTop/paddingBottom: ,設置每一個section的頂部和底部的padding，默認為0；
fixedElements：‘#ID名’，固定的元素，默認值為null，需要為其配置一個jquery選擇器，在頁面滾動的時候，fixedElements設置的元素固定不動，如果不加這個屬性，那么你想固定的東西會被覆蓋掉；
keyboardScrolling： ，是否可以使用鍵盤方向鍵導航，默認為true；
touchSensitivity： ，在移動設備中滑動頁面的敏感性，默認為5，最高為100，越大越難滑動
continuousVertial: ,是否循環滾動，默認為false，如果設置為true，則頁面會循環滾動，但是不會像loopTop/loopBottom那樣生硬（這個屬性和兩個loop不兼容），
animateAnchor：錨鏈接是否可以控制滾動動畫，默認為true，若設置為false，則通過錨鏈接定位到某個section時不會有動畫
// paddingTop:100 設置每個section頂部的padding 默認0 如果有固定頂部菜單導航使用
// paddingBottom:200 設置每個section底部的padding 默認0 如果有固定底部使用
// fixedElements:'#jk' 頁面固定元素
// keyboardScrolling:true 是否用鍵盤控制 默認true
// touchSensitivity:10 在移動設備中的靈敏度 默認5 按百分比衡量 最高100 越大越難滑動
// continuousVertical:true 是否循環翻頁 與padTOP padBOT不兼容 不要同時設置
// animateAnchor:true 是否可以用錨鏈接控制滾動動畫 默認true
menu: '#fullpageMenu', //
navigation: true, //是否顯示導航（小圓點）
navigationPosition: 'right', //設置小圓點位置 left right
navigationTooltips: ['第一頁', '第二頁', '第三頁', '第四頁'], //小圓點錨記
showActiveTooltip: true, //是否顯示當前導航的小圓點信息 默認false
slidesNavigation: true, //是否顯示幻燈片小圓點
slidesNavPosition: 'bottom', // 小圓點位置 可設置top，bottom
scrollOverflow: true, //單頁超出內容是否出現滾動條 需要slimscroll插件支持
sectionSelector: //section的選擇器 默認為.section
slideSelector: //slide的選擇器 默認為.slide
fullpage方法
fullpage方法的使用：
$.fn.fullpage.方法名稱()
方法：moveSectionUp()
moveSectionDown()
moveTo(section,slide):滾動到第幾頁，第幾個slide，頁面是從一開始，slide是從0開始的
moveSlideRight():幻燈片向右滾動
moveSliadLeft（）：幻燈片向左滾動
setAutoScrolling（boolean）：動態設置autoScrolling
setLockAnchors(boolean):動態設置lockAnchor
setRecordHistory(boolean):動態設置recordHistory
setScrollingSpeed(milliseconds):動態設置scrollingspped
setAllowScrolling（Boolean，[directions]）:添加或刪除鼠標滾輪/滑動控制，第一個參數表示是否啟用，第二個為方向：all，up，down，left，right，方向可以取多個值，用逗號隔開
destroy(type):type為空時，則fullpage特效消失，但HTML樣式，結構仍存在；type為all時，則頁面的一切均消失
reBuild（）：重新更新頁面和尺寸，用於通過ajax請求后改變了頁面結構之后，重建效果。
延遲加載圖片及視頻：
<img data-src="">
<video>
<source data-src="" type="">
</video>(在src之前加data-就可調用)
回調函數
回調函數：寫在配置項的位置處
afterLoad（anchorLink，index）
滾動到某一section處，且滾動結束后，會觸發一次此回調函數，函數接收anchorLink和index 兩個參數，anchorLink是錨鏈接，index是序號（從1開始）。
作用：我們可以根據anchorLink和index的參數值的判斷，觸發相應的事件。
實例：afterLode：function（anchorLink，index）{
console.log（"afterLode:anchorLink"+anchorLink+";index:"+index）;//將兩個參數打印出來，在控制台可以看到
}
onLeave（index，nextIndex，direction）
在離開一個頁面時，會觸發一次此回調函數，接收index（離開時頁面的序號）、nextIndex（滾動到的目標頁面的序號）和direction（滾動的方向，有up和down）3個參數
通過return false；可以取消滾動
afterRender（）
頁面初始化完成后的回調函數
afterResize（）
瀏覽器窗口尺寸改變后的回調函數
afterSlideLode（anchorLink，index，slideAnchor，slideIndex）
滾動到某一slide后的回調函數，與afterLode類似，接收anchorLink、index、slideIndex、direction4個參數
onSlideLeave（anchorLink，index，slideIndex，direction，nextSlideIndex）
在離開一個slide時會觸發此函數，與onLeave相似，接收anchorLink、index、slideIndex、direction4個參數