如何用原生JS实现手机端滑动跳转

如何用原生JS实现手机端滑动跳转

1. 首先我们明白滑动方向有四种：从左到右、从右到左、从上到下、从下到上。我们需要通过角度来判定手指滑动的方向。

function getAngle(angx, angy) {
    return Math.atan2(angy, angx) * 180 / Math.PI;//atan2返回的是弧度的值,所以我们要将它换成角度详情请百度Math.atan2();
};


//根据起点终点返回方向 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) < 300 && Math.abs(angy) < 300) {//Math.abs() 代表绝对值的意思
        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;
}

2. 开始写手机触碰事件，手机触碰事件一般有touchstart,touchmove,touchend。我们这里用到的只有touchstart和touchend。

var startx, starty;
//手指接触屏幕
document.addEventListener("touchstart", function(e){    
    startx = e.touches[0].pageX;//获取第一次touch的页面的X轴值
    starty = e.touches[0].pageY;//获取第一次touch的页面的Y轴值
}, 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);

如果想跳转到另一个网页只要在case里加个window.location="XX.html"就行了。
好了 就这么简单！

下面贴上完整代码↓↓（我太菜了，有什么问题欢迎指出鸭）

请在移动端，PC上无法查看效果，滑动查看效果