基于 zepto 的触摸函数封装

墨蓝 2022-08-19 11:20 108阅读 0赞

移动端使用 zepto 做一些基于触摸的动画的时候，需要开发一个函数库。

功能：实例化对象以后能够，触发相应的事件，能够返回给我，当前的移动方向和 X 轴 或者 Y 轴 的移动位移。

var TouchDirection = function(e) { 
        var startThat = {},
            moveThat = {};
    
        this.touchStartEven = function(e) { 
    
            startThat.startX = e.touches[0].pageX;
            startThat.startY = e.touches[0].pageY;
            this.startThat = startThat;
    
            return this;
        };
    
        this.touchMoveEven = function(e) { 
            moveX = e.touches[0].pageX;
            moveY = e.touches[0].pageY;
    
            tempX = this.startThat.startX - moveX;
            tempY = this.startThat.startY - moveY;
            absTempX = Math.abs(tempX);
            absTempY = Math.abs(tempY);
            angleTouch = absTempX / absTempY;
    
            if (tempX < 0 && angleTouch >= 1) {
                //鼠标右滑动
                moveThat.direction = 'right';
                moveThat.moveX = absTempX;
                this.moveThat = moveThat;
    
                return this;
            }
            if (tempX > 0 && angleTouch >= 1) {
                //鼠标左滑动
                moveThat.direction = 'left';
                moveThat.moveX = absTempX;
                this.moveThat = moveThat;
    
                return this;
    
            }
            if (tempY > 0 && angleTouch < 1) {
                //上滑
                moveThat.direction = 'up';
                moveThat.moveY = absTempY;
                this.moveThat = moveThat;
    
                return this;
            }
    
            if (tempY < 0 && angleTouch < 1) {
                //下滑
                moveThat.direction = 'down';
                moveThat.moveY = absTempY;
                this.moveThat = moveThat;
    
                return this;
            }
        };
    
        this.touchEndEven = function(){ 
            this.startThat = null;
            this.moveThat = null;
        };
    };
    
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44
         45
         46
         47
         48
         49
         50
         51
         52
         53
         54
         55
         56
         57
         58
         59
         60
         61
         62
         63
         64
         65

使用方法：

var touchResult = new TouchDirection();
    
    var touchStartEv = function(e){ 
        var that = touchResult.touchStartEven(e);
        console.log(that.startThat);
    };
    
    var touchMoveEv = function(e) { 
        var that = touchResult.touchMoveEven(e);
        console.log(that.moveThat);
    };
    
    var touchEndEv = function(e) { 
        var that = touchResult.touchEndEven(e);
    };
    
    $('.test').on('touchstart', touchStartEv);
    $('.test').on('touchmove', touchMoveEv);
    $('.test').on('touchend', touchEndEv);
    
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20

测试的运行结果：

![这里写图片描述][20160111231448268]

实例 demo 地址：[点我][Link 1]

--------------------

如果您觉得对您有帮助，请点击下面的 star 给我一颗星。谢谢啦！

allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%26text%3DFollow%20%40zhiqiang21%26data.count.api%3D%2Fusers%2Fzhiqiang21%23followers%26data.count.href%3D%2Fzhiqiang21%2Ffollowers%26data.count.aria.label%3D%23%20followers%20on%20GitHub%26data.style%3Dmega%26data.icon%3D%26aria.label%3DFollow%20%40zhiqiang21%20on%20GitHub" style="font-family: 'PingFang SC'; font-size: 14px; border-style: none; border-width: initial; height: 28px; width: 198.5px;">  allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%2Fblog%26text%3DStar%26data.count.api%3D%2Frepos%2Fzhiqiang21%2Fblog%23stargazers\_count%26data.count.href%3D%2Fzhiqiang21%2Fblog%2Fstargazers%26data.count.aria.label%3D%23%20stargazers%20on%20GitHub%26data.style%3Dmega%26data.icon%3Docticon-star%26aria.label%3DStar%20zhiqiang21%2Fblog%20on%20GitHub" style="font-family: 'PingFang SC'; font-size: 14px; border-style: none; border-width: initial; height: 28px; width: 97px;">  allowtransparency="true" scrolling="no" frameborder="0" src="https://buttons.github.io/buttons.html\#href%3Dhttps%3A%2F%2Fgithub.com%2Fzhiqiang21%2Fblog%26text%3DWatch%26data.count.api%3D%2Frepos%2Fzhiqiang21%2Fblog%23subscribers\_count%26data.count.href%3D%2Fzhiqiang21%2Fblog%2Fwatchers%26data.count.aria.label%3D%23%20watchers%20on%20GitHub%26data.style%3Dmega%26data.icon%3Docticon-eye%26aria.label%3DWatch%20zhiqiang21%2Fblog%20on%20GitHub" style="font-family: 'PingFang SC'; font-size: 14px; border-style: none; border-width: initial; height: 28px; width: 113px;">

[20160111231448268]: /images/20220731/bf66e5b8fe0b4b17a305f18ba49efc5b.png
[Link 1]: https://github.com/zhiqiang21/WebComponent/tree/master/touchjs

发表评论取消回复

表情：

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

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

相关阅读

相关基于UIAlertController的封装调用

UIAlertController是iOS8之后推出的合并UIAlert和UIActionSheet的控件，我相信很多地方都会使用到的，因此在一个单例中对其进行封装一下，每次使

短命女/ 2023年10月17日 08:48/ 0 赞/ 184 阅读

相关封装函数insertAfter

Element.prototype.insertAfter = function(targetNode,afterNode){ var

淩亂°似流年/ 2022年12月07日 12:18/ 0 赞/ 148 阅读

相关 Zepto清单

Zepto清单 <table style="border:1px solid silver; border-collapse:collapse; word-break:b

淡淡的烟草味﹌/ 2022年09月24日 15:16/ 0 赞/ 223 阅读

相关基于Zepto.js库的cookies操作

js库下载：[https://github.com/kennx/Zepto-Cookie][https_github.com_kennx_Zepto-Cookie] demo

阳光穿透心脏的1/2处/ 2022年08月24日 01:25/ 0 赞/ 98 阅读

相关基于 zepto 的触摸函数封装

移动端使用 zepto 做一些基于触摸的动画的时候，需要开发一个函数库。功能：实例化对象以后能够，触发相应的事件，能够返回给我，当前的移动方向和 X 轴或者 Y 轴的移

墨蓝/ 2022年08月19日 11:20/ 0 赞/ 109 阅读

相关基于原生javascript的淡入淡出函数封装（兼容IE）

在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的jav

- 日理万妓/ 2022年07月16日 01:45/ 0 赞/ 146 阅读

相关基于zepto的H5/移动端tab切换触摸拖动加载更多数据

以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据，在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件，这个插件用起

冷不防/ 2022年07月14日 10:53/ 0 赞/ 58 阅读

相关读 zepto 源码之工具函数

Zepto 提供了丰富的工具函数，下面来一一解读。源码版本本文阅读的源码为 [zepto1.2.0][] $.extend `$.extend` 方法可以用

爱被打了一巴掌/ 2022年06月16日 00:13/ 0 赞/ 182 阅读

相关基于Qt QGraphicsView的多点触摸绘图

本应用于基于QGraphicsView框架，实现多点触摸. 工程仅仅演示了多点触摸绘图，源自我前段时间一款基于Qt的绘图软件. 工程结构: ![775344-2016042

冷不防/ 2022年06月10日 11:07/ 0 赞/ 306 阅读

相关 zepto 初始

什么是zepto.js 概念：移动端开发框架,是jquery的轻量级代替品；API及语句同jquery相似，但文件更小(可压缩至8KB)。

╰半夏微凉°/ 2021年07月24日 14:17/ 0 赞/ 357 阅读