Zepto实现滑动核销效果

╰半橙微兮° 2021-06-24 14:37 415阅读 0赞

主要事件：touchmove touchstart touchend

0、定义常量值（滑动 横向记录差 distance，手指离开屏幕位置与开始滑动位置；刮开角度 ：angle 当距离差到达时的翻转角度，过程中为0-angle）

1、记录touchstart 的 pageX ：originX

2、绑定touchmove事情，对 实时pageX ：X ，

3、比较X-originX，同时根据常量值计算 偏转角度（角度为-），进行transform rotate的 css3 旋转。

当差值达到常量distance时，滑动页滑落（可设置top值并赋予动画效果 掉落至屏幕底部）

4、若差值未到，则在touchend事件后，重置角度为rotate 0deg

伪代码如下：

var $ = require('zepto'),
    
        Rive = function(option){
    
            this.container = $(option.container);
            this.callback = option.callback;
            this.ajax = true;
    
            var X, reduce, distance = 150, angle= 30,_this = this;
            var body = $('body')
            body.on('touchstart',function(event){
                X = event.touches[0].pageX;
            });
            this.container.on('touchmove',function(event){
    
                event.preventDefault();
                var x = event.touches[0].pageX;
                reduce = x - X;
                var animateTo = - angle /distance* reduce;
    
                if(reduce > 0){
                    _this.container.css({
                        'transform': 'rotate('+ animateTo +'deg)',
                        '-ms-transform': 'rotate('+ animateTo +'deg)',
                        '-moz-transform': 'rotate('+ animateTo +'deg)',
                        '-webkit-transform': 'rotate('+ animateTo +'deg)',
                        '-o-transform': 'rotate('+ animateTo +'deg)',
                        'transition': 'all 0.5s ease-out'
                    });
                    if(reduce > distance ){
                        if(_this.ajax) {
                            _this.ajax = false;
                            _this.container.css({
                                'top': '200px',
                                'opacity': '0',
                                'transition': 'all 0.7s ease-out'
                            })
                            _this.callback && _this.callback();
                        };
                    }
                }
            });
            body.on('touchend', function(){
                _this.ajax = true;
                if (reduce > distance) {
                    _this.container.css({
                        'transition': 'all 0 ease 0'
                    });
                } else {
                    _this.container.css({
                        'transform': 'rotate(0deg)',
                        '-ms-transform': 'rotate(0deg)',
                        '-moz-transform': 'rotate(0deg)',
                        '-webkit-transform': 'rotate(0deg)',
                        '-o-transform': 'rotate(0deg)',
                        'transition': 'all 0 ease 0',
                        'top': '0'
                    });
                };
            });
    
        }, p = Rive.prototype;
    
        p.reset = function () {
            this.container.css({
                'transform': 'rotate(0deg)',
                '-ms-transform': 'rotate(0deg)',
                '-moz-transform': 'rotate(0deg)',
                '-webkit-transform': 'rotate(0deg)',
                '-o-transform': 'rotate(0deg)',
                'transition': 'all 0 ease 0',
                'top': '0',
                'opacity': '1'
            });
            this.ajax = true;
        };
        
    module.exports = Rive;

发表评论取消回复

表情：

评论列表（有 0 条评论，415人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 236 阅读

相关 js实现滑动门效果

滑动门效果： ![初始][SouthEast] ![第三道门打开][SouthEast 1] 原理：一共四道门，初始情况下，第一道门打开，其他三道门关闭，如第一个

待我称王封你为后i/ 2022年09月29日 13:59/ 0 赞/ 188 阅读

相关 android----------用ViewPage实现滑动效果

一、效果图先上实现效果： ![Center][] 实现滑动效果主要用到的类是：android.support.v4.view.ViewPager 二、代码

野性酷女/ 2022年08月19日 04:52/ 0 赞/ 241 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 277 阅读

相关 ListView滑动删除效果实现

通过继承ListView然后结合PopupWindow实现首先是布局文件： delete\_btn.xml：这里只需要一个Button <?xml versi

不念不忘少年蓝@/ 2022年07月24日 06:04/ 0 赞/ 200 阅读

相关 recyclerview 实现卡片滑动效果

想recyclerview快速实现卡片滑动，需要一个重要帮助类，LinearSnapHelper类,这个类是Android24.2.0之后引入的帮助类，是SnapHelper抽

╰+攻爆jí腚メ/ 2022年07月14日 01:00/ 0 赞/ 362 阅读

相关 ToolBar实现滑动伸缩效果

> 致力于用最简洁的语言描述最复杂的技术有时候我们看TitleBar可以随着下面的内容的滑动而伸缩，这个是怎么实现的呢（我居然不会发那种动画，有没有大神在留言区教一下怎么发

男娘i/ 2022年06月16日 06:53/ 0 赞/ 280 阅读

相关 ViewPager滑动动画效果实现

ViewPager滑动动画效果效果①： ![这里写图片描述][SouthEast] 效果②： ![这里写图片描述][SouthEast 1] 实现

刺骨的言语ヽ痛彻心扉/ 2022年06月11日 05:44/ 0 赞/ 328 阅读

相关基于zepto的motion库-移动端页面无缝循环滑动效果

基于zepto的motion库-移动端页面无缝循环滑动效果 [案例地址][Link 1] <!DOCTYPE HTML> <head> <meta

你的名字/ 2022年05月31日 07:48/ 0 赞/ 239 阅读

相关 Zepto实现滑动核销效果

主要事件：touchmove touchstart touchend 0、定义常量值（滑动横向记录差 distance，手指离开屏幕位置与开始滑动位置；刮开角度：angl

╰半橙微兮°/ 2021年06月24日 14:37/ 0 赞/ 416 阅读