JS实现通过双指捏合，对div进行放大缩小

在Web开发中，使用JavaScript和CSS可以实现一个双指捏合（Pinch to Zoom）的功能，使得用户可以通过触摸屏幕来放大或缩小一个div元素。这通常涉及到监听触摸事件，并计算手指间的距离变化，然后根据这个变化来调整div的尺寸。

下面是一个基本的实现步骤和示例代码：

HTML

首先，我们需要一个div元素作为我们想要缩放的元素。

1 <div id="zoomable-div" style="width: 300px; height: 300px; background-color: lightblue;">
2     Zoom me!
3 </div>

CSS

确保你的div是可触摸的，并且在触摸时有一个合适的视觉反馈。

#zoomable-div {
    transition: transform 0.2s ease; /* 平滑的缩放动画 */
    touch-action: none; /* 防止浏览器默认的触摸行为 */
}

JavaScript

使用JavaScript来处理触摸事件，计算手指间的距离变化，并据此调整div的大小。

 1 document.addEventListener('DOMContentLoaded', function() {
 2     const zoomableDiv = document.getElementById('zoomable-div');
 3     let startDistance = null;
 4     let scale = 1;
 5     let isPinching = false;
 6     let initialScale = 1; // 初始缩放值，用于恢复原始大小
 7  
 8     function getDistance(touches) {
 9         const dx = touches[0].pageX - touches[1].pageX;
10         const dy = touches[0].pageY - touches[1].pageY;
11         return Math.sqrt(dx * dx + dy * dy);
12     }
13  
14     zoomableDiv.addEventListener('touchstart', function(e) {
15         if (e.touches.length === 2) { // 确保是两个手指触屏
16             startDistance = getDistance(e.touches);
17             isPinching = true;
18             initialScale = scale; // 记录当前缩放状态以便于后续恢复
19         }
20     });
21  
22     zoomableDiv.addEventListener('touchmove', function(e) {
23         if (isPinching && e.touches.length === 2) { // 确保是两个手指触屏并且正在进行捏合操作
24             const currentDistance = getDistance(e.touches);
25             const pinchScale = currentDistance / startDistance; // 计算缩放比例
26             scale = initialScale * pinchScale; // 应用缩放比例到初始缩放值上
27             zoomableDiv.style.transform = `scale(${scale})`; // 应用缩放变换
28         }
29     });
30  
31     zoomableDiv.addEventListener('touchend', function() {
32         isPinching = false; // 结束捏合操作
33     });
34 });