首页 > 其他 > 详细

滑动操作

时间:2015-11-16 12:18:38      阅读:335      评论:0      收藏:0      [点我收藏+]
var startX, startY, isStart; //在外部声明startX以用于touchmove和touchend的函数中

$(‘nav‘).on(‘touchstart‘, function(evt) { //手指按倒屏幕上的坐标
    var target = evt.targetTouches[0] || evt.changedTouches[0]; //0表示取第一个手指即单指触摸
    startX = target.pageX;
    startY = target.pageY;
    isStart = 1;
});

$(‘nav‘).on(‘touchmove‘, function(evt) { //手指滑动到屏幕上的坐标
    if(1 !== isStart) {
        return;
    } else {
        isStart = 2;
    }
    var target = evt.targetTouches[0] || evt.changedTouches[0];
    var moveX = target.pageX;
    var moveY = target.pageY;
    var offsetX = moveX - startX; 
    var absX = Math.abs(offsetx); //X方向上的偏移量
    var absY = Math.abs(moveY - startY); //Y方向上的偏移量
    if(absX > absY) { 
        evt.preventDefault(); //水平滑动时阻止垂直方向的偏移量
    }
});

$(‘nav‘).on(‘touchend touchcancel‘, function(evt) {
    if(2 !== isStart) {  
        return; //若只有点击操作而无滑动则不执行下面操作
    } else {
        isStart = undefined;
    }
    var target = evt.targetTouches[0] || evt.changedTouches[0];
    var endX = target.pageX;
    var offsetX = endX - startX;
    if(offsetX > 30) {
        prev(); //水平向右滑动超过一定距离执行上一页
    } else if(offset < -30) {
        next(); //水平向左滑动超过一定距离执行下一页
    } else { 
        return;
    }
});

通过手指触摸屏幕和离开屏幕的坐标差来定义滑动

滑动操作

原文:http://www.cnblogs.com/yusi97/p/4968494.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!