slide

滑屏组件

• 自定义滑屏组件，可定制滑屏动画

• 可掌握每屏动画结果

Install

git clone https://github.com/jayZOU/slide.git
npm install
gulp

接见http://localhost:8080/

Examples

    /**
    *    slide 滑屏组件
    *    @author jayzou
    *    @time 2015-10-25
    *    @version 0.0.1
    *    @class Slide
    *    @param String    wrap                    必填    传入滑动容器ID
    *    @param String    currentClass            选填    滑动时切换动画class，默许current
    *    @param boolean   startLocalstorage       选填    纪录当前阅读页面
    *    @param {Object}  onChange                选填    切换完成回调
    *    @param {Object}  onDownChange            选填    下滑完成时回调
    *    @param {Object}  onUpChange              选填    上滑完成时回调
    *    @param {Object}  defaultClass            选填    滑动历程动画结果
    **/

    var slide = new Slide({
        wrap: 'wrap',                    //必填，传入滑动容器ID
        currentClass: 'current',        //选填，滑动时切换动画class
        startLocalstorage: false,        //选填，是不是开启localstorage纪录页面返回后是不是回到上次接见的页面，默许false
        onChange: function(){            //选填，每屏切换完成时的回调
            console.log("onchange");
        },
        onDownChange: function(){        //选填，下滑完成时回调
            console.log("onDownChange");
        },
        onUpChange: function(){        //选填，上滑完成时回调
            console.log("onUpChange");
        },
        defaultClass: {                    //选填，滑动历程动画结果
            'webkitTransition': '-webkit-transform 0.5s ease',    //须要加前缀
            'transform': 'translate(0px, 0px)'                    //不须要加前缀
        },
    });

    // slide.next();                        //下一页
    // slide.prev();                        //上一页
    // slide.playTo(3);                        //直接跳转第n页
    // console.log(slide.getPage());        //猎取为当前页数
    // slide.lockPage();                    //锁住屏幕，制止滑动
    // slide.unLockPage();                    //解锁屏幕，许可滑动

    //辅佐类
    // slide.toggleClass(targ, className);    //置换class
    // slide.addClass(targ, className);        //增加class
    // slide.removeClass(targ, className);    //删除class
    // slide.css(o, style);                    //增加style款式

Notes

• 滑动容器只能传入ID值，不许可传入class