slidePage

一款轻量级全屏滚动插件，依赖于jquery或zepto两者之一，结合Scrollify和H5FullscreenPage的特点优化，桌面端与移动端都能适用。

在线演示：http://lipten.link/projects/slidePage/demo.html

示例代码：

slidePage.init({
    'index' : 1,
    'before' : function(index){},
    'after' : function(index){},
    'next' : function(index){},
    'prev' : function(index){},
    'speed' : 700
    'refresh'  : true,
    'useWheel' : true,
    'useKeyboard' : true,
    'useArrow' : true,
    'useAnimation' : true,
 });

1、下载slidePage

利用bower安装

bower install slidePage

或者克隆到本地

git clone https://github.com/lipten/slidePage.git

2、引用相关文件

<link rel="stylesheet" type="text/css" href="slidePage.css">        //插件必须样式
<link rel="stylesheet" type="text/css" href="page-animation.css">   //动画样式，可自己编写

3、引用js文件

<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>  //zepto.js或者jquery类库
<script type="text/javascript" src="slidePage.min.js"></script>         //slidePage主文件，支持手机和PC浏览

4、html结构

<div class="slidePage-container" id="slidePage-container">
    <div class="item page1">
        <h2>page1</h2>
        <div class="step step1 fadeIn" data-delay="1000"></div>
        <div class="step step2 fadeIn"></div>
    </div>
    <div class="item page2">
        <h2>page2</h2>
        <div class="step step1 slideRight" data-delay="1300"></div>
        <div class="step step2 slideLeft"></div>
        <div class="step step3 zoomIn"></div>
    </div>
</div>

5、初始化代码

slidePage.init();

Configuration

slidePage.init({
    'index' : 1,
    'before' : function(index){},
    'after' : function(index){},
    'next' : function(index){},
    'prev' : function(index){},
    'speed' : 700
    'refresh'  : true,
    'useWheel' : true,
    'useKeyboard' : true,
    'useArrow' : true,
    'useAnimation' : true,
 });

Options

index

初始进入的索引页面，值为1时从第一页开始，默认为1

before

触发页面滚动前的回调，参数index为滚动前的页面序号

after

触发页面滚动后的回调，参数index为滚动后的页面序号

next

监听滚动下一页，参数index为滚动前的页面序号

prev

监听滚动上一页，参数index为滚动前的页面序号

speed

页面过渡的动画时间，以毫秒为单位

refresh

往回滚的时候是否重新执行动画

useWheel

开启或关闭鼠标滚轮滑动

useKeyboard

开启或关闭键盘上下键控制滚动

useArrow

使用自带样式的下箭头提示图标

useAnimation

开启或关闭动画

Using Animation

<div class="step slideRight" data-delay="1300"></div>

在想要动画控制的元素上加上step类，并加上css动画类名即可使用动画，data-delay属性控制动画延时播放(默认为100毫秒); 此项目还为您准备了一套css动画：page-animation.css，可自由更改或添加您想要的动画，

动效列表:

[
    fadeIn,                 //渐显动画
    fadeFlash,              //闪烁动画
    flaxLine,               //伸展线条(基于父容器的宽度伸到100%)
    borderFlash,            //闪烁边框(红色边框)
    forceDown,              //重力砸下的动画(不是弹跳动画)
    slideLeft,              //从左边渐现移动出现
    slideRight,             //从右边渐现移动出现
    slideUp,                //从上边渐现移动出现
    slideDown,              //从下边渐现移动出现
    rotateIn,               //旋转渐现出现
    zoomIn,                 //缩放渐显出现
    heartBeat,              //若隐若现
    rollInLeft,             //从左边旋转渐现
    rollInRight             //从右边旋转渐现
]

Method

slidePage.index(pageIndex)

pageIndex传入一个正整数作为页码跳转到指定页面(从1开始),不传值则返回当前页面的页码

slidePage.prev()

滚动上一页

slidePage.next()

滚动下一页