js判断手指滑动方向(移动端)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

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);
</script>
</head>
<body>
</body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值