学习使用fullpage插件

一，认识

fullPage.js 是一个基于jQuery的插件，它能够很方便、很轻松的制作出全屏网站。
它有以下这些特点：
1.支持鼠标滚动
2.多个回调函数
3.支持手机、平板触屏事件
4.支持css3动画
5.支持窗口缩放
6.窗口缩放时自动调整
7.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等

关于下载
下载地址:
http://fullpage.81hu.com/

关于引入
引入FullPage.css

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css">

.引入FullPage.js和jquery.js

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>

二，使用

关于结构

<div id="wrapper">
		<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 class="section">
			第四屏
		</div>
	</div>

和bootstrap一样，fullpage也要使用固定的类名，来控制页面的固定的样式，产生全屏的效果;
首先这个结构首先自己先创建一个外部div,内部有4个div,分别是4个垂直屏，类名是section，然后也有横切屏，类名是slide。

关于调用和相关的方法
调用：

$(function(){
       $('#wrapper').fullpage();
   });

相关的方法：

sectionColor
可以为每一个section设置background-color属性。
active
在页面中为某一个section添加了active之后，默认当窗口打开时会定位到此active，显示当前页。
fixedElements
固定的元素，默认为null，需要配置一个jquery选择器。在页面滚动的时候，fixedElements设置的元素固定不动。

回调函数

$('#wrapper').fullpage({
    		sectionsColor : ['#f00' , '#0f0' , '#00f' , '#f0f'],
    		afterLoad : function(anchorLink , index){
    			console.log('lode' , index);
    		},
    		//滚动到某一section，且滚动结束后，会触发一次此回调函数，函数接受anchorLink和index两个参数
    		onLeave : function(index , nextIndex , direction){
                console.log('leave' , index , nextIndex , direction);
    		}
    		//在我们离开一个section时，会触发一次此回调函数，接受index、nextIndex和direction 3个参数
    	})