js放大缩小拖拽旋转

基础概念

JavaScript 放大缩小拖拽旋转是指在前端开发中，通过 JavaScript 实现对元素（如图片、容器等）进行缩放、拖动和旋转的操作。这些操作通常用于增强用户界面的交互性和用户体验。

类型与应用场景

放大缩小：常用于图片查看器、地图应用等，允许用户根据需要调整视图大小。
拖拽：广泛应用于各种布局调整、元素排序等场景。
旋转：常见于图像编辑工具、3D 模型展示等，提供多角度查看的功能。

示例代码

以下是一个简单的示例，展示了如何使用 JavaScript 和 CSS 实现一个元素的放大缩小、拖拽和旋转功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Example</title>
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
  }
</style>
</head>
<body>

<div id="box"></div>

<script>
  const box = document.getElementById('box');
  let isDragging = false;
  let startX, startY, initialMouseX, initialMouseY;
  let scale = 1;
  let rotation = 0;

  box.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = box.offsetLeft;
    startY = box.offsetTop;
    initialMouseX = e.clientX;
    initialMouseY = e.clientY;
  });

  window.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - initialMouseX;
    const dy = e.clientY - initialMouseY;
    box.style.left = `${startX + dx}px`;
    box.style.top = `${startY + dy}px`;
  });

  window.addEventListener('mouseup', () => {
    isDragging = false;
  });

  // 放大缩小
  window.addEventListener('wheel', (e) => {
    e.preventDefault();
    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
    scale *= zoomFactor;
    box.style.transform = `translate(-50%, -50%) scale(${scale}) rotate(${rotation}deg)`;
  });

  // 旋转
  window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      rotation += 5;
    } else if (e.key === 'ArrowLeft') {
      rotation -= 5;
    }
    box.style.transform = `translate(-50%, -50%) scale(${scale}) rotate(${rotation}deg)`;
  });
</script>

</body>
</html>