slidePage全屏滾動(dòng)插件

一款輕量級全屏滾動(dòng)插件，依賴于jquery或zepto兩者之一，結(jié)合Scrollify和H5FullscreenPage的特點(diǎn)優(yōu)化，桌面端與移動(dòng)端都能適用。

在線演示：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、引用相關(guān)文件

<link rel="stylesheet" type="text/css" href="slidePage.css">        //插件必須樣式
<link rel="stylesheet" type="text/css" href="page-animation.css">   //動(dòng)畫樣式，可自己編寫

3、引用js文件

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>  //zepto.js或者jquery類庫
<script type="text/javascript" src="slidePage.min.js"></script>         //slidePage主文件，支持手機(jī)和PC瀏覽

4、html結(jié)構(gòu)

<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

初始進(jìn)入的索引頁面，值為1時(shí)從第一頁開始，默認(rèn)為1

before

觸發(fā)頁面滾動(dòng)前的回調(diào)，參數(shù)index為滾動(dòng)前的頁面序號

after

觸發(fā)頁面滾動(dòng)后的回調(diào)，參數(shù)index為滾動(dòng)后的頁面序號

next

監(jiān)聽滾動(dòng)下一頁，參數(shù)index為滾動(dòng)前的頁面序號

prev

監(jiān)聽滾動(dòng)上一頁，參數(shù)index為滾動(dòng)前的頁面序號

speed

頁面過渡的動(dòng)畫時(shí)間，以毫秒為單位

refresh

往回滾的時(shí)候是否重新執(zhí)行動(dòng)畫

useWheel

開啟或關(guān)閉鼠標(biāo)滾輪滑動(dòng)

useKeyboard

開啟或關(guān)閉鍵盤上下鍵控制滾動(dòng)

useArrow

使用自帶樣式的下箭頭提示圖標(biāo)

useAnimation

開啟或關(guān)閉動(dòng)畫

Using Animation

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

在想要?jiǎng)赢嬁刂频脑厣霞由蟬tep類，并加上css動(dòng)畫類名即可使用動(dòng)畫，data-delay屬性控制動(dòng)畫延時(shí)播放(默認(rèn)為100毫秒); 此項(xiàng)目還為您準(zhǔn)備了一套css動(dòng)畫：page-animation.css，可自由更改或添加您想要的動(dòng)畫，

動(dòng)效列表:

[
    fadeIn,                 //漸顯動(dòng)畫
    fadeFlash,              //閃爍動(dòng)畫
    flaxLine,               //伸展線條(基于父容器的寬度伸到100%)
    borderFlash,            //閃爍邊框(紅色邊框)
    forceDown,              //重力砸下的動(dòng)畫(不是彈跳動(dòng)畫)
    slideLeft,              //從左邊漸現(xiàn)移動(dòng)出現(xiàn)
    slideRight,             //從右邊漸現(xiàn)移動(dòng)出現(xiàn)
    slideUp,                //從上邊漸現(xiàn)移動(dòng)出現(xiàn)
    slideDown,              //從下邊漸現(xiàn)移動(dòng)出現(xiàn)
    rotateIn,               //旋轉(zhuǎn)漸現(xiàn)出現(xiàn)
    zoomIn,                 //縮放漸顯出現(xiàn)
    heartBeat,              //若隱若現(xiàn)
    rollInLeft,             //從左邊旋轉(zhuǎn)漸現(xiàn)
    rollInRight             //從右邊旋轉(zhuǎn)漸現(xiàn)
]

Method

slidePage.index(pageIndex)

pageIndex傳入一個(gè)正整數(shù)作為頁碼跳轉(zhuǎn)到指定頁面(從1開始),不傳值則返回當(dāng)前頁面的頁碼

slidePage.prev()

滾動(dòng)上一頁

slidePage.next()

滾動(dòng)下一頁