zoukankan      html  css  js  c++  java
  • touchstart,touchmove判断手机中滑屏方向

    滑动屏幕    touchstart:接触屏幕时触发,touchmove:活动过程触发,touchend:离开屏幕时触发

    首先获取手接触屏幕时的坐标X,Y

    //获取接触屏幕时的X和Y
    $('body').bind('touchstart',function(e){
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    

      然后获取滑动的坐标,并使用后面的坐标减去前面的坐标,通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的,所以可使用Math.abs()进行比较,比如:像右上角滑动,当往上滑动的距离大于往右的距离时,取其往上滑动的距离,即往上滑动。

    $('body').bind('touchmove',function(e){
        //获取滑动屏幕时的X,Y
        endX = e.originalEvent.changedTouches[0].pageX,
        endY = e.originalEvent.changedTouches[0].pageY;
        //获取滑动距离
        distanceX = endX-startX;
        distanceY = endY-startY;
        //判断滑动方向
        if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
            console.log('往右滑动');
        }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
            console.log('往左滑动');
        }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
            console.log('往上滑动');
        }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
            console.log('往下滑动');
        }else{
            console.log('点击未滑动');
        }
     
    });
    

      

  • 相关阅读:
    柔性数组
    2015阿里秋招当中一个算法题(经典)
    LAMP环境搭建
    JS和JQuery中的事件托付 学习笔记
    #17 Letter Combinations of a Phone Number
    码农生涯杂记_5
    【C++ Primer每日刷】之三 标准库 string 类型
    扎根本地连接未来 千米网的电商“红海”生存术
    poj 3356
    经验之谈—OAuth授权流程图
  • 原文地址:https://www.cnblogs.com/rusr/p/8509136.html
Copyright © 2011-2022 走看看