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

巴特西

fullPage插件使用

fullPage插件

1.引文件

2.HTML

3.JavaScript

代码

最新文章

热门文章