当前位置：网站首页>移动端双指缩放事件(原生)，e.originalEvent.touches

移动端双指缩放事件(原生)，e.originalEvent.touches

2022-07-26 10:24:00 【唐策】 

<!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>
原网站

版权声明
本文为[唐策]所创，转载请带上原文链接，感谢
https://tangce.blog.csdn.net/article/details/82456245

边栏推荐

猜你喜欢

随机推荐