滑屏组件----slide

Me_Kun 发布于2019-08-22 10:58 / 2664人阅读

摘要：滑屏组件自定义滑屏组件，可定制滑屏动画可控制每屏动画效果访问滑屏组件必填传入滑动容器选填滑动时切换动画，默认选填记录当前浏览页面选填切换完成回调选填下滑完成时回调选填上滑完成时回调选填滑动过程动画效果必填，传入滑动容器选填，滑动时切换动

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

GPU云服务器云服务器滑屏移动视图类 slide Sliding slide menu

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91545.html

Transition 实现轮播图

摘要：关于轮播图的实现算是前端的一个基础，其实实现起来是很简单，这里把实现的基本思路总结一下。推荐使用，它是一款开源的移动端脚本框架，它可以完美的实现在移端开发的大多数事件，如点击滑动拖动多点触控等事件。关于轮播图的实现算是前端的一个基础，其实实现起来是很简单，这里把实现的基本思路总结一下。轮播图的实现方案有很多种方式，可以用纯js来实现，也可用css来实现，我们这里主要用到了css3的过...

pf_miles 2019-08-30 15:52 评论0 收藏0
微信小程序仿微信SlideView组件slide-view

摘要：使用安装从小程序基础库版本或以上及开发者工具或以上开始，小程序支持使用安装第三方包。节点用于承载滑动时所展示的节点，其宽度应于传入的相同。微信小程序仿微信SlideView组件。使用 1、安装 slide-view 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 npm install --save...

mikyou 2019-08-23 12:30 评论0 收藏0
50行代码搞定无限滑动幻灯片

摘要：对，滑动式幻灯片的关键就在于隐藏。在条件里我们添加一个事件相当于滑动后的回掉，依赖这个事件在幻灯片滑动执行完毕后立即执行里面的闪回操作。通过添加事件监听滑动是否结束从而迅速闪回，达到貌似无限滑动的效果。 slider轮播组件，在各类网站上出现及其频繁，有渐隐式的，滑动式的等等一系列。栗子在这: 但我当初学习写轮播时却被各种入门教程搞得焦头烂额。不是代码太复杂，就是封装太严重，初学者很难...

yimo 2019-08-20 14:35 评论0 收藏0