滑屏组件----slide
发布在前端菜鸟自学2015年10月25日view:2135HTML5css3开源项目前端开发BrettBat移动开发Web组件,模块化
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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
评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端菜鸟自学

分享一些学习经历和一些教程

我的收藏