纯 JS 实现放大缩小拖拽功能(完整代码)

现在我们来详细讲解如何使用纯 JS 实现放大缩小拖拽功能，并提供完整的代码。

1. 实现原理

放大缩小和拖拽功能的实现需要用到一些基础的 CSS 和 JS 知识：

position 属性来设置元素的定位方式
transform 属性来实现元素的放大缩小
mousemove 事件来实现元素的拖拽
mouseup 事件来实现鼠标释放后停止拖拽

2. 必要的准备工作

首先，我们需要在 HTML 文件中创建一个容器元素，用于装载要实现放大缩小和拖拽的元素。容器元素的样式可以根据需求进行自定义，代码如下：

<div id="container" style="width: 500px; height: 500px; border: 1px solid #000;"></div>

接着，在页面中引入 CSS 和 JS 文件：

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

3. 实现放大缩小功能

放大缩小功能的实现主要依赖于 JS 中的 transform 属性和鼠标滚轮事件。代码如下：

// 获取容器元素
const container = document.querySelector('#container');

// 定义元素缩放比例
let scale = 1;

// 监听鼠标滚轮事件
container.addEventListener('wheel', function(event) {
  // 计算缩放比例
  scale = scale + event.deltaY * -0.01;
  scale = Math.min(Math.max(0.125, scale), 4);

  // 设置元素样式
  container.style.transform = `scale(${scale})`;
});

首先，我们通过 document.querySelector() 方法获取到容器元素，并定义一个初始的缩放比例 scale，默认为 1。

接着，我们使用 addEventListener() 方法监听容器元素上的鼠标滚轮事件，利用 event.deltaY 属性获取鼠标滚轮滚动的值，并根据此值来计算出缩放比例。

然后，我们使用 Math.min() 和 Math.max() 方法来限制缩放比例的最小值和最大值，以免缩放超过范围。

最后，我们使用 style.transform 属性将缩放比例应用到容器元素上，实现元素的放大缩小。

4. 实现拖拽功能

拖拽功能的实现主要依赖于 JS 中的 mousemove 和 mouseup 事件，以及 mousedown 事件来启动拖拽。代码如下：

// 获取容器元素
const container = document.querySelector('#container');

// 定义变量来存储鼠标位置和元素位置的差值
let diffX, diffY;

// 添加 mousedown 事件监听器
container.addEventListener('mousedown', function(event) {
  // 计算鼠标位置和元素位置的差值
  diffX = event.clientX - container.offsetLeft;
  diffY = event.clientY - container.offsetTop;

  // 添加 mousemove 事件监听器
  document.addEventListener('mousemove', onMouseMove);
});

// 添加 mouseup 事件监听器
document.addEventListener('mouseup', function() {
  // 移除 mousemove 事件监听器
  document.removeEventListener('mousemove', onMouseMove);
});

// 定义 mousemove 事件监听器的回调函数
function onMouseMove(event) {
  // 计算元素新的位置
  const left = event.clientX - diffX;
  const top = event.clientY - diffY;

  // 设置元素样式
  container.style.left = `${left}px`;
  container.style.top = `${top}px`;
}

首先，我们用 document.querySelector() 方法获取到容器元素，并定义两个变量 diffX 和 diffY 来存储鼠标位置和元素位置的差值。

然后，我们使用 addEventListener() 方法在容器元素上添加 mousedown 事件监听器，当鼠标在容器元素上按下时，计算鼠标位置和元素位置的差值。

接着，我们使用 document.addEventListener() 方法在整个页面上添加 mousemove 事件监听器，并将之前定义的 onMouseMove() 函数作为回调函数，实现拖拽效果。

最后，我们使用 document.addEventListener() 方法在整个页面上添加 mouseup 事件监听器，当鼠标释放时，移除 mousemove 事件监听器，以停止拖拽。

5. 完整代码

下面是完整的 HTML 和 JS 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>放大缩小拖拽实例</title>
    <style>
      #container {
        width: 500px;
        height: 500px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // 获取容器元素
      const container = document.querySelector('#container');

      // 定义元素缩放比例
      let scale = 1;

      // 监听鼠标滚轮事件
      container.addEventListener('wheel', function(event) {
        // 计算缩放比例
        scale = scale + event.deltaY * -0.01;
        scale = Math.min(Math.max(0.125, scale), 4);

        // 设置元素样式
        container.style.transform = `scale(${scale})`;
      });

      // 定义变量来存储鼠标位置和元素位置的差值
      let diffX, diffY;

      // 添加 mousedown 事件监听器
      container.addEventListener('mousedown', function(event) {
        // 计算鼠标位置和元素位置的差值
        diffX = event.clientX - container.offsetLeft;
        diffY = event.clientY - container.offsetTop;

        // 添加 mousemove 事件监听器
        document.addEventListener('mousemove', onMouseMove);
      });

      // 添加 mouseup 事件监听器
      document.addEventListener('mouseup', function() {
        // 移除 mousemove 事件监听器
        document.removeEventListener('mousemove', onMouseMove);
      });

      // 定义 mousemove 事件监听器的回调函数
      function onMouseMove(event) {
        // 计算元素新的位置
        const left = event.clientX - diffX;
        const top = event.clientY - diffY;

        // 设置元素样式
        container.style.left = `${left}px`;
        container.style.top = `${top}px`;
      }
    </script>
  </body>
</html>

6. 示例说明

这里提供两个示例来说明这个完整代码的使用。

示例一：移动、放大和缩小圆形

首先，我们可以将容器元素中插入一个圆形元素，并使用 CSS 设置其样式：

<div id="container">
  <div class="circle"></div>
</div>

<style>
  #container {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .circle {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
  }
</style>

接着，我们在 JS 中根据需要修改元素的选择器和 CSS 样式，实现元素的拖拽和放大缩小功能：

// 获取容器元素和圆形元素
const container = document.querySelector('#container');
const circle = document.querySelector('.circle');

// 定义圆形元素缩放比例
let scale = 1;

// 监听鼠标滚轮事件
container.addEventListener('wheel', function(event) {
  // 计算缩放比例
  scale = scale + event.deltaY * -0.01;
  scale = Math.min(Math.max(0.125, scale), 4);

  // 设置圆形元素样式
  circle.style.transform = `scale(${scale})`;
});

// 定义变量来存储鼠标位置和元素位置的差值
let diffX, diffY;

// 添加 mousedown 事件监听器
circle.addEventListener('mousedown', function(event) {
  // 计算鼠标位置和元素位置的差值
  diffX = event.clientX - circle.offsetLeft;
  diffY = event.clientY - circle.offsetTop;

  // 添加 mousemove 事件监听器
  document.addEventListener('mousemove', onMouseMove);
});

// 添加 mouseup 事件监听器
document.addEventListener('mouseup', function() {
  // 移除 mousemove 事件监听器
  document.removeEventListener('mousemove', onMouseMove);
});

// 定义 mousemove 事件监听器的回调函数
function onMouseMove(event) {
  // 计算元素新的位置
  const left = event.clientX - diffX;
  const top = event.clientY - diffY;

  // 设置圆形元素样式
  circle.style.left = `${left}px`;
  circle.style.top = `${top}px`;
}

这样，我们就可以通过鼠标滚轮放大缩小圆形，通过鼠标拖拽圆形元素实现移动。

示例二：显示图像并实现拖拽、放大和缩小功能

我们也可以将容器元素中插入一个图像元素，通过 JS 实现图像的拖拽和放大缩小功能。

首先，在 HTML 中插入图像元素：

<div id="container">
  <img src="https://picsum.photos/500" alt="随机图像">
</div>

<style>
  #container {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
</style>

接着，我们在 JS 中修改元素的选择器和 CSS 样式：

// 获取容器元素和图像元素
const container = document.querySelector('#container');
const img = document.querySelector('img');

// 定义图像元素缩放比例
let scale = 1;

// 监听鼠标滚轮事件
container.addEventListener('wheel', function(event) {
  // 计算缩放比例
  scale = scale + event.deltaY * -0.01;
  scale = Math.min(Math.max(0.125, scale), 4);

  // 设置图像元素样式
  img.style.transform = `scale(${scale})`;
});

// 定义变量来存储鼠标位置和元素位置的差值
let diffX, diffY;

// 添加 mousedown 事件监听器
img.addEventListener('mousedown', function(event) {
  // 计算鼠标位置和元素位置的差值
  diffX = event.clientX - img.offsetLeft;
  diffY = event.clientY - img.offsetTop;

  // 添加 mousemove 事件监听器
  document.addEventListener('mousemove', onMouseMove);
});

// 添加 mouseup 事件监听器
document.addEventListener('mouseup', function() {
  // 移除 mousemove 事件监听器
  document.removeEventListener('mousemove', onMouseMove);
});

// 定义 mousemove 事件监听器的回调函数
function onMouseMove(event) {
  // 计算元素新的位置
  const left = event.clientX - diffX;
  const top = event.clientY - diffY;

  // 设置图像元素样式（注意考虑缩放的影响）
  img.style.left = `${left}px`;
  img.style.top = `${top}px`;
}

这样，我们就可以拖拽图像元素实现移动，通过鼠标滚轮放大缩小图像。同时，为了防止图像超出容器元素的范围，我们可以在 CSS 样式中设置容器元素的 overflow 属性为 hidden。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯 JS 实现放大缩小拖拽功能(完整代码) - Python技术站