博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js判断手指滑动方向(移动端)
阅读量:5054 次
发布时间:2019-06-12

本文共 1667 字,大约阅读时间需要 5 分钟。

var startx, starty;    //获得角度    function getAngle(angx, angy) {        return Math.atan2(angy, angx) * 180 / Math.PI;    };    //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动    function getDirection(startx, starty, endx, endy) {        var angx = endx - startx;        var angy = endy - starty;        var result = 0;        //如果滑动距离太短        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {            return result;        }        var angle = getAngle(angx, angy);        if (angle >= -135 && angle <= -45) {            result = 1;        } else if (angle > 45 && angle < 135) {            result = 2;        } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {            result = 3;        } else if (angle >= -45 && angle <= 45) {            result = 4;        }        return result;    }    //手指接触屏幕    document.addEventListener("touchstart", function(e) {        startx = e.touches[0].pageX;        starty = e.touches[0].pageY;    }, false);    //手指离开屏幕    document.addEventListener("touchend", function(e) {        var endx, endy;        endx = e.changedTouches[0].pageX;        endy = e.changedTouches[0].pageY;        var direction = getDirection(startx, starty, endx, endy);        switch (direction) {            case 0:                alert("未滑动!");                break;            case 1:                alert("向上!")                break;            case 2:                alert("向下!")                break;            case 3:                alert("向左!")                break;            case 4:                alert("向右!")                break;            default:        }    }, false);

 

转载于:https://www.cnblogs.com/beiz/p/5817192.html

你可能感兴趣的文章
SSL-ZYC 洛谷 P1118 数字三角形
查看>>
关于APNs的错误认识纠正
查看>>
InotifyPropertyChanged接口实现简单数据绑定
查看>>
text-align:center 在FireFox及Google浏览器下无效的问题
查看>>
BZOJ1692: [Usaco2007 Dec]队列变换
查看>>
《POINTERS ON C》(基于ANSI C)知识点及附带问题(三)
查看>>
leetcode dp
查看>>
简单回射程序小结
查看>>
iOS - 通过UIActivityViewController分享APP内容
查看>>
阿里云云主机挂载数据盘,格式化硬盘(新购云主机)(转)
查看>>
JSON与JavaBean、XML之间的转换
查看>>
腾讯视频qlv格式转换mp4普通视频方法
查看>>
Maven中classifier
查看>>
Use Laravel/homestead 环境维护基于 brophp 开发的老项目
查看>>
测绘软件优缺点
查看>>
SQL优化(SQL TUNING)可大幅提升性能的实战技巧之一——让计划沿着索引跑
查看>>
pyhton自动化项目编码以及命名规范
查看>>
会声会影毛玻璃制作
查看>>
webmagic循环爬取
查看>>
用UltraEdit比較两个文件
查看>>