Zepto实现滑动核销效果

最新推荐文章于 2023-03-10 22:41:34 发布

原创最新推荐文章于 2023-03-10 22:41:34 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript-Jquery插件同时被 2 个专栏收录

58 篇文章

订阅专栏

前端-Html5

16 篇文章

订阅专栏

本文介绍了一个基于Zepto.js的滑动手势实现方案，通过监听touchstart、touchmove和touchend事件来实现页面元素的旋转与滑动效果。该方案利用CSS3的transform属性完成旋转动画，并在滑动超过预设阈值时使页面元素滑落。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要事件：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;