一、fullPage引入和使用

1、引入外掛

全屏外掛fullPage.js依賴jQuery。我下載的是fullPage2.9.6版本，依賴jQuery1.6.0及以上的版本。

先引入jQuery檔案，再引入外掛：

<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<script src="https://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript" src="../jquery.fullPage.js"></script>
 

2、編寫HTML

預設情況下，每一螢幕的程式碼都需要有DIV包裹，並且設定DIV的類名為section，預設情況下，第一個setion將作為首頁顯示在頁面上。

<div id="fullpage">
  <div class="section">section 1</div>
  <div class="section">section 2</div>
  <div class="section">section 3</div>
  <div class="section">section 4</div>
</div>
 

假如你需要讓某一個section作為首頁的第一屏展示，你只需要給這個section新增一個active的類，Fullpage會自動優先展示這個螢幕，例如定義下面的程式碼：

<div class="section active">section 3</div>

Fullpage自帶左右滑動的幻燈片，只需要在section中新增DIV元素，並且給DIV元素新增slide類，FUllpage會自動生成幻燈片特效，例如下面的程式碼：

<div id="section">
  <div class="slide">slide 1</div>
  <div class="slide">slide 2</div>
  <div class="slide">slide 3</div>
  <div class="slide">slide4</div>
</div>
 

3、初始化FullPage

$(document).ready(function() {
    $('#fullpage').fullpage();
});

fullPage函式可以傳入引數options，options是一個物件，用於配置fullPage。

比如如果需要迴圈演示，即最後一頁滾動後跳轉到第一頁，將選項continuousVertical設定為true。

$(document).ready(function() {
    $('#fullpage').fullpage({continuousVertical:true});
});

二、fullPage的引數、函式、回撥函式

1、引數

疑問：

1）scrollBar表示顯示瀏覽器滾動條。當fitToSection為false，即使autoScrolling設定為true，拉動瀏覽器滾動條不會發生自滾動，但是拉動滑鼠滾輪會。這跟文件描述似乎不一致

2）normalScrollElementTouchThreshold啥意思

3）continuousHorizontal、scrollHorizontally等不起作用

答：需要安裝擴充套件檔案。目前需要收費。

選項menu使用案例：

<ul id="myMenu">
	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
	<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
<div id="fullpage">
  <div class="section">section 1</div>
  <div class="section">section 2</div>
  <div class="section">section 3</div>
  <div class="section">section 4</div>
</div>
<script>
$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], //滾動到某屏時會給把錨點值賦給該屏的data-anchor屬性
	menu: '#myMenu'
});
</script>

2、方法

使用：$.fn.fullpage.方法。比如：$.fn.fullpage.moveSectionUp()。

3、回撥函式

$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);

		if(index == 3){
			alert("Section 3 ended loading");
		}

		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});