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日

相关文章

  • 一文详解如何使用node执行js文件

    一文详解如何使用node执行js文件 在本篇文章中，我们将会详细介绍如何使用 Node.js 来运行 JavaScript 代码。 Node.js 是什么 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让 JavaScript 代码在服务器端运行。它提供了丰富的内置库和模块，可以轻松地构建高性能、可伸缩的网络应用…

    JavaScript 2023年5月28日
    00

  • js获取html参数及向swf传递参数应用介绍

    下面是针对“js获取html参数及向swf传递参数应用介绍”的完整攻略。 1. JS获取HTML参数 1.1 通过 URL 参数获取 JS获取 HTML 参数的最简单方法是解析 URL 参数。通过 window.location.search 可以获取到 URL 中的查询字符串部分，这个部分包含了所有的参数和它们的值。 示例： const queryStri…

    JavaScript 2023年5月27日
    00

  • Javascript验证用户输入URL地址是否为空及格式是否正确

    关于JavaScript验证用户输入URL地址是否为空及格式是否正确的攻略，可以按照以下步骤实现： 步骤一：获取用户输入的URL地址 获取用户输入的URL地址。可以使用document.getElementById()或document.querySelector()等方法获取用户输入的URL地址。 const urlInput = document.get…

    JavaScript 2023年6月10日
    00

  • javascript 函数的暂停和恢复实例详解

    不过需要先明确一点，本文中的“暂停和恢复”实际上指的是异步操作中的暂停和恢复，而不是 JavaScript 函数本身的暂停和恢复。 以下是一个详细的攻略，包括两个实例示例。 JavaScript 函数的暂停和恢复实例详解 什么是异步操作 在了解如何暂停和恢复异步操作之前，首先需要明确什么是异步操作。 异步操作（Asynchronous Operation）指…

    JavaScript 2023年5月28日
    00

  • js 通过Object.defineProperty() 定义和控制对象属性

    JavaScript的Object.defineProperty()方法可以用来定义和控制对象属性的访问方式。它可以让我们在对象上定义新属性，或修改已有属性的getter和setter方法。本文将全面介绍Object.defineProperty()的使用方法及其示例。 基本用法 Object.defineProperty()方法接受三个参数：要定义属性的对…

    JavaScript 2023年5月27日
    00

  • JS实现图片预加载无需等待

    为了使页面加载更快，我们可以在页面载入之前就预先加载所需要的图片资源。这个过程称为“图片预加载”。当用户访问页面时，这些图片就已经在本地缓存中了，从而不会出现因等待加载而导致页面卡顿的情况。下面是JS实现图片预加载无需等待的完整攻略。 1. 获取图片的URL列表 首先，我们需要获取要预加载的图片列表。这个列表可以是一个数组，也可以通过DOM元素获取。下面是一…

    JavaScript 2023年6月11日
    00

  • JavaScript高级函数应用之分时函数实例分析

    JavaScript高级函数应用之分时函数实例分析 分时函数是一种常见的优化技术，它可以在页面实际需要使用某些资源时再进行加载，避免了一开始就加载所有资源，造成不必要的浪费。以下是分时函数的简单实现： function timeChunk(arr, fn, count) { const len = arr.length; // 获取要迭代的数组长度 let …

    JavaScript 2023年6月11日
    00

  • javascript常见用法总结

    JavaScript常见用法总结 JavaScript是一种广泛用于Web开发的编程语言，具有强大的功能和灵活性。本文将为您介绍一些常见的JavaScript用法以及它们的用法和示例。 1. 声明和初始化变量 在JavaScript中，您可以使用var、let或const关键字来声明变量。其中，var和let可以初始化变量，而const只能初始化常量。下面是…

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