fullPage插件使用

fullPage插件

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

1.引文件

	<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>

2.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>

3.JavaScript

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

可选配置

选项				|类型		|默认值	|说明		

slidesColor		|函数		|无		|设置背景颜色
navigation		|布尔值		|false	|是否显示项目导航
scrollingSpeed	|整数		|700	|滚动速度，单位为毫秒
navigationPosition |字符串	|right	|项目导航的位置，可选 left 或 right
navigationTooltips |数组		|null	|项目导航的 tip
keyboardScrolling	|布尔值	|true	|是否使用键盘方向键导航

方法						|说明
moveSectionUp()			|向上滚动
moveSectionDown()		|向下滚动
moveTo(section, slide)	|滚动到
moveSlideRight()		|向右
moveSlideLeft()			|向左
setAllowScrolling()		|添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()	|添加或删除键盘方向键控制

回调函数					|说明
afterLoad				|滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave					|滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender				|页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad			|滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave			|某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

代码

$(function(){
    //屏幕的高度
    var sh = $(window).height();
    $(".demo").fullpage({
        sectionsColor: ["#f9dd67", "#84a2d4", "#ef674d", "#ffeedd", "#cf4759", "#84d9ed", "#8ac060", "#97dff0"],
        navigation: true,
        // anchorIndex: 锚链接的索引数， index当前第几屏， 从1开始
        afterLoad: function(anchorIndex, index) {
            //把所有屏的js添加的动画全部清掉
            $(".section img, .section div").attr("style", "");

            // 给当前屏，添加animation的类
            //先把其它屏的动画清空
            $(".section").removeClass("animation");
            $(".section").eq(index-1).addClass("animation");

            //如果是第二屏
            if (index == 2) {
               //...
            }

            //第三屏是纯用css来实现的
            if (index == 4) {
                //...
            }

            //第六屏
            if (index == 6) {
              	//...
            }

            //第八屏
            if (index == 8) {
                //...
            }
        }
    });
});

可以配合c3的动画来实现

配置参考地址：

http://www.dowebok.com/77.html