当前位置：网站首页>Mobile dual finger scaling event (native), e.originalevent.touches

Mobile dual finger scaling event (native), e.originalevent.touches

2022-07-26 13:41:00 【Tangce】 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Double finger zoom event </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") // Where the finger is when the finger is pressed X,Y coordinate   pageX = e.originalEvent.touches[0].pageX; pageY = e.originalEvent.touches[0].pageY; // Initial position X,Y  coordinate   initX = e.target.offsetLeft; initY = e.target.offsetTop; // Record initial   A set of data   Use as zoom  if (e.originalEvent.touches.length >= 2) { // Determine whether there are two points on the screen  start = e.originalEvent.touches; // Get the first set of two points  }; // Indicates that the finger is pressed   // isTouch = true; }); $(".full-bgimg").on("touchmove",function(e){
      e.preventDefault(); //  A piece of   finger   perform   The target element moves   operation  if (e.originalEvent.touches.length == 1 && isTouch) {}; // 2  root   Finger execution   Zoom in on the target element  if (e.originalEvent.touches.length >= 2 && isTouch) { // alert("2") // Get the second set of two points  var now = e.originalEvent.touches; Math.abs(e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX) // The current distance becomes smaller , getDistance  Is a method of Pythagorean Theorem  if(getDistance(now[0], now[1]) < getDistance(start[0], start[1])){ }; }; }) $(".full-bgimg").on("touchend",function(e){
      // take  isTouch  It is amended as follows false  Express   Fingers have left the screen  // if (isTouch) {isTouch = false;} }); // The zoom   Pythagorean theorem method - Find the distance between two points  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>
原网站

版权声明
本文为[Tangce]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261024001496.html

边栏推荐

猜你喜欢

随机推荐