现在我们来详细讲解如何使用纯 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 实现放大缩小拖拽功能(完整代码)
基础教程推荐
猜你喜欢
- Ajax实现省市县三级联动 2023-02-23
- 通过JavaScript实现动态圣诞树详解 2023-08-12
- 关于 html：如何从 css 表中删除边距和填充 2022-09-21
- 浅析Ajax的 原理及优缺点 2022-12-15
- css浮动中避免包含元素高度为0的4种解决方法 2023-12-20
- AJAX +SpringMVC 实现bootstrap模态框的分页查询功能 2023-01-26
- ajax实现省市三级联动效果 2023-02-23
- js相册效果代码(点击创建即可) 2023-12-02
- TypeScript接口介绍 2023-08-08
- Javascript图片上传前的本地预览实例 2024-01-05
