1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript

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

1. 实现原理

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

  1. position 属性来设置元素的定位方式
  2. transform 属性来实现元素的放大缩小
  3. mousemove 事件来实现元素的拖拽
  4. 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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript 日期和时间的格式化方法

    JS 日期和时间的格式化方法在开发中经常会用到，可以将日期和时间按照指定格式输出。下面是一份详细的攻略。 日期和时间的格式化方法 在JavaScript中，日期和时间可以使用 Date() 对象来表示。而要对日期进行格式化，就需要将 Date() 中的内容按照指定的格式进行输出。下面介绍三种常见的格式化方式。 1. 使用 toDateString() toD…

    JavaScript 2023年5月27日
    00

  • 判断js数据类型的函数实例详解

    判断js数据类型的函数实例详解 背景 在JavaScript中，数据类型多种多样，包括了数字、字符串、布尔值、数组、对象、函数等。而有些时候，需要用JavaScript代码来对不同的数据类型做不同的操作。因此，了解如何判断这些数据类型就显得非常重要了。本文将详细讲解如何通过函数来判断JavaScript中不同数据类型。 判断数据类型的函数 typeof函数 …

    JavaScript 2023年5月27日
    00

  • JS猜数字游戏实例讲解

    JS猜数字游戏实例讲解 猜数字游戏是一种基于逻辑和推理的有趣互动游戏。下面将通过一个JS猜数字游戏实例来讲解如何实现这个游戏。 游戏规则 猜数字游戏的规则非常简单：系统会自动随机生成一个数，在限定的次数内，玩家需要通过猜测数字来确定该数，如果玩家猜中了，游戏结束，玩家胜利；反之，如果玩家未在限定的次数内猜出该数，则游戏失败。 实现步骤 随机生成目标数字：使用…

    JavaScript 2023年6月10日
    00

  • JS实现的base64加密、md5加密及sha1加密详解

    JS实现的base64加密、md5加密及sha1加密详解 什么是base64加密 Base64是一种基于64个可打印字符来表示二进制数据的方法。在某些场景下，网络传输只支持传输ASCII字符，但是需要传输二进制数据时，使用Base64编码可以将二进制数据转换为ASCII字符，便于传输。 在JavaScript中，可以使用代码库 btoa() 方法来实现Bas…

    JavaScript 2023年5月28日
    00

  • 教你如何写出可维护的JS代码

    非常感谢您对“可维护的JS代码”的关注。以下是教你如何写出可维护的JS代码的完整攻略： 1. 命名规范 变量和函数命名要具有描述性：让人一眼就能明白变量或函数的用途，例如setBackgroundColor() 等。 使用清晰的命名风格：可以使用CamelCase或PascalCase风格，但是应该在整个项目中保持一致。 避免使用单个字符变量名称，因为这样会…

    JavaScript 2023年5月28日
    00

  • JavaScript Window窗口对象属性和使用方法

    JavaScript Window窗口对象属性和使用方法 JavaScript中的Window对象是浏览器窗口的根对象，可以通过Window对象来获取和操作窗口的各种属性和方法。 获取窗口属性 Window.innerHeight和Window.innerWidth属性 Window.innerHeight属性和Window.innerWidth属性分别用于…

    JavaScript 2023年5月27日
    00

  • Javascript处理DOM元素事件实现代码

    当我们需要在网页中添加交互功能时，JavaScript 处理 DOM 元素事件是必须掌握的技能。在接下来的回答中，我将介绍完整的攻略，帮助你学会如何使用 JavaScript 处理 DOM 元素事件。 什么是事件？ 在编写网页时，事件是指用户操作网页时所触发的动作。例如，当用户点击一个按钮，就会触发 click 事件；当用户将光标移动到一个元素上时，会触发 …

    JavaScript 2023年6月11日
    00

  • javascript 数组排序函数sort和reverse使用介绍

    当我们需要对 JavaScript 数组进行排序时，可以使用数组排序函数 sort() 和 reverse()。本文将详细介绍这两个函数的使用方法。 sort() 函数 sort() 函数用于对数组进行排序，默认按照字母顺序排序，但也可以针对数字或其他数据类型进行排序。sort() 函数可接受一个排序函数作为参数，该函数将指定排序方式。 以下是一些常见的排序…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部