美文网首页
移动端左右上下判断

移动端左右上下判断

作者: 可爱的木头 | 来源:发表于2017-05-03 17:18 被阅读0次

    获取接触屏幕时的X和Y

    $('body').bind('touchstart',function(e){
        startX = e.originalEvent.changedTouches[0].pageX,
        startY = e.originalEvent.changedTouches[0].pageY;
    });
    
    
    $('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('点击未滑动');
        }
    });
    

    相关文章

      网友评论

          本文标题:移动端左右上下判断

          本文链接:https://www.haomeiwen.com/subject/oecltxtx.html