当前位置：首页 > HTML

h5实现图片缩放移动

2026-03-06 11:11:23HTML

实现图片缩放与移动的H5方案

在H5中实现图片的缩放和移动功能，可以通过以下方法结合HTML、CSS和JavaScript完成。以下方案支持触摸屏手势操作（如双指缩放、拖动）以及鼠标交互。

h5实现图片缩放移动

基础HTML结构

<div class="image-container">
  <img id="zoomable-image" src="your-image.jpg" alt="Zoomable Image">
</div>

CSS样式设置

.image-container {
  width: 100%;
  height: 300px; /* 根据需求调整 */
  overflow: hidden;
  position: relative;
  touch-action: none; /* 禁用默认触摸行为 */
}

#zoomable-image {
  position: absolute;
  transform-origin: 0 0; /* 缩放基准点 */
  user-select: none; /* 防止文本选中干扰 */
}

JavaScript核心逻辑

const image = document.getElementById('zoomable-image');
let scale = 1;
let posX = 0;
let posY = 0;

// 触摸事件处理（支持多点触控）
let touchStartDistance = null;

image.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    touchStartDistance = getDistance(e.touches[0], e.touches[1]);
  } else if (e.touches.length === 1) {
    // 记录单指初始位置用于拖动
  }
});

image.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const currentDistance = getDistance(e.touches[0], e.touches[1]);
    const newScale = scale * (currentDistance / touchStartDistance);
    applyTransform(posX, posY, newScale);
  } else if (e.touches.length === 1) {
    // 处理单指拖动逻辑
  }
});

// 鼠标滚轮缩放
image.addEventListener('wheel', (e) => {
  e.preventDefault();
  const delta = -e.deltaY * 0.01;
  const newScale = Math.min(Math.max(0.1, scale + delta), 4); // 限制缩放范围
  applyTransform(posX, posY, newScale);
});

// 辅助函数：计算两点距离
function getDistance(touch1, touch2) {
  return Math.hypot(
    touch2.clientX - touch1.clientX,
    touch2.clientY - touch1.clientY
  );
}

// 应用变换
function applyTransform(x, y, s) {
  scale = s;
  posX = x;
  posY = y;
  image.style.transform = `translate(${x}px, ${y}px) scale(${s})`;
}