【瑞模网】移动端双指缩放事件(原生)，e.originalEvent.touches

最新推荐文章于 2024-07-26 15:43:04 发布

瑞模网

最新推荐文章于 2024-07-26 15:43:04 发布

阅读量339

点赞数

分类专栏：前端文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/rrmod/article/details/128923757

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双指缩放事件</title>
</head>
<body>
  <div class="full-bgimg">

  </div>
<script>
var pageX, pageY, initX, initY, isTouch = false;
  var start = [];
  $(".full-bgimg").on("touchstart",function(e){
    // alert("touchstart")
    //手指按下时的手指所在的X，Y坐标  
    pageX = e.originalEvent.touches[0].pageX;
    pageY = e.originalEvent.touches[0].pageY;
    //初始位置的X，Y 坐标  
    initX = e.target.offsetLeft;
    initY = e.target.offsetTop;
    //记录初始 一组数据 作为缩放使用
    if (e.originalEvent.touches.length >= 2) { //判断是否有两个点在屏幕上
      start = e.originalEvent.touches; //得到第一组两个点
    };
    //表示手指已按下  
    // isTouch = true;
  });
  $(".full-bgimg").on("touchmove",function(e){
    e.preventDefault();
    // 一根 手指 执行 目标元素移动 操作
    if (e.originalEvent.touches.length == 1 && isTouch) {};

    // 2 根 手指执行 目标元素放大操作
    if (e.originalEvent.touches.length >= 2 && isTouch) {
      // alert("2")
      //得到第二组两个点
      var now = e.originalEvent.touches;
      Math.abs(e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)
      //当前距离变小， getDistance 是勾股定理的一个方法
      if(getDistance(now[0], now[1]) < getDistance(start[0], start[1])){

      };
    };      
  })

  $(".full-bgimg").on("touchend",function(e){
    //将 isTouch 修改为false  表示 手指已经离开屏幕
    // if (isTouch) {isTouch = false;}
  });
   //缩放 勾股定理方法-求两点之间的距离
function getDistance(p1, p2) {
    var x = p2.pageX - p1.pageX,
    y = p2.pageY - p1.pageY;
    return Math.sqrt((x * x) + (y * y));
};
</script>  
</body>
</html>