js 实现拖拽滚动、滚轮缩放元素函数和案例
文章目录
- 一、拖拽滚动
-
- 1、封装函数
- 2、示例：
- 二、滚轮缩放
-
- 1、封装函数
- 2、结合拖拽滚动示例
一、拖拽滚动
1、封装函数
/**
* @description 使用鼠标拖拽div，实现横向、纵向滚动
* @param el 被拖拽滚动的元素（产生滚动条的元素）
*/
function addDragable(el) {
let startX = 0; // el的scroll横向初始位置
let gapX = 0; // 鼠标点击时的横向初始位置
let startY = 0; // el的scroll纵向向初始位置
let gapY = 0; // 鼠标点击时的纵向初始位置
el.addEventListener("mousedown", start);
el.addEventListener("mouseleave", stop); // 移除时解除事件
function start(event) {
// 判断是否点击鼠标左键
if (event.button == 0) {
gapX = event.clientX;
gapY = event.clientY;
startX = el.scrollLeft;
startY = el.scrollTop;
el.addEventListener("mousemove", move); // document
el.addEventListener("mouseup", stop);
}
// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
return false;
}
function move(event) {
// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
var left = event.clientX - gapX;
var top = event.clientY - gapY;
// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
el.scrollTo(startX - left, startY - top); // 横向 纵向
return false;
}
function stop() {
// 鼠标松开，解除绑定
el.removeEventListener("mousemove", move, false);
el.removeEventListener("mouseup", stop, false);
}
}
2、示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现元素拖拽滚动title>
head>
<body>
<div id="dragableWrapper" class="wrapper">
<div id="dragable">
<h2>实现元素拖拽滚动（不会因拖拽被选中的文字,按情形选一既可。）h2>
<h2>js做法：event.preventDefault(); 阻止默认事件或冒泡；h2>
<h2>css做法：user-select: none;h2>
<div class="row">
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
div>
<div class="row">
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">
<copyright class="copyright">
GeniusXYT：
<a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">
https://blog.csdn.net/GeniusXYT/article/details/124198758
a>
（转发请注明出处）
copyright>
div>
div>
div>
div>
body>
<script>
/**
* @description 使用鼠标拖拽div，实现横向、纵向滚动
* @param el 被拖拽滚动的元素（产生滚动条的元素）
*/
function addDragable(el) {
let startX = 0; // el的scroll横向初始位置
let gapX = 0; // 鼠标点击时的横向初始位置
let startY = 0; // el的scroll纵向向初始位置
let gapY = 0; // 鼠标点击时的纵向初始位置
el.addEventListener("mousedown", start);
el.addEventListener("mouseleave", stop); // 移除时解除事件
function start(event) {
// 判断是否点击鼠标左键
if (event.button == 0) {
gapX = event.clientX;
gapY = event.clientY;
startX = el.scrollLeft;
startY = el.scrollTop;
el.addEventListener("mousemove", move); // document
el.addEventListener("mouseup", stop);
}
// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
return false;
}
function move(event) {
// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
var left = event.clientX - gapX;
var top = event.clientY - gapY;
// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
el.scrollTo(startX - left, startY - top); // 横向 纵向
return false;
}
function stop() {
// 鼠标松开，解除绑定
el.removeEventListener("mousemove", move, false);
el.removeEventListener("mouseup", stop, false);
}
}
addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))
script>
<style>
.wrapper {
width: 1000px;
height: 500px;
padding: 200px;
overflow: auto;
border: 2px ridge rgb(65, 194, 227);
}
h2 {
user-select: none;
}
.row {
user-select: none;
white-space: nowrap;
}
.box {
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(43, 229, 235);
}
.row:last-child .box:last-child {
position: relative;
}
.row:last-child .box:last-child .copyright {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
opacity: .2;
}
style>
html>
二、滚轮缩放
1、封装函数
/**
* @description 滚轮缩放元素
* @param targetEl 被缩放目标元素
* @param wrapperEl 产生缩放的包裹元素，默认是targetEl的父元素
*/
function addScale(targetEl, wrapperEl) {
var scale = 1; // 初始缩放比率
var scalePercent = 0.2; // 缩放系数（越大缩放跨度越大）
var minScale = 0.1; // 最小缩放比率
var maxScale = 5; // 最大缩放比率
var transformOrigin = "left top"; // 以左上角为基准点，不会造成元素超出左、上边界而没有滚动条问题
wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素
wrapperEl.addEventListener("mousewheel", onMouseWheel);
// 鼠标滚轮事件
function onMouseWheel(e) {
// var e = e || window.e;
var down = true; // 定义向下滚动的标志
down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;
// 鼠标滚轮向下缩小
if (down) {
scale = (parseFloat(scale) - scalePercent).toFixed(2);
if (scale > minScale) {
targetEl.style.transform = "scale(" + scale + ")";
targetEl.style.transformOrigin = transformOrigin;
} else {
scale = minScale;
}
} else {
// 鼠标滚轮向上放大
scale = (parseFloat(scale) + scalePercent).toFixed(2);
if (scale < maxScale) {
targetEl.style.transform = "scale(" + scale + ")";
targetEl.style.transformOrigin = transformOrigin;
} else {
scale = maxScale;
}
}
if (e.preventDefault) {
/*FF 和 Chrome*/
e.preventDefault(); // 阻止默认事件
}
return false;
}
}
2、结合拖拽滚动示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现元素拖拽滚动title>
head>
<body>
<div id="dragableWrapper" class="wrapper">
<div id="dragable">
<h2>实现元素拖拽滚动（不会因拖拽被选中的文字,按情形选一既可。）h2>
<h2>js做法：event.preventDefault(); 阻止默认事件或冒泡；h2>
<h2>css做法：user-select: none;h2>
<div class="row">
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
div>
<div class="row">
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">div>
<div class="box">
<copyright class="copyright">
GeniusXYT：
<a href="https://blog.csdn.net/GeniusXYT/article/details/124198758">
https://blog.csdn.net/GeniusXYT/article/details/124198758
a>
（转发请注明出处）
copyright>
div>
div>
div>
div>
body>
<script>
/**
* @description 使用鼠标拖拽div，实现横向、纵向滚动
* @param el 被拖拽滚动的元素（产生滚动条的元素）
*/
function addDragable(el) {
let startX = 0; // el的scroll横向初始位置
let gapX = 0; // 鼠标点击时的横向初始位置
let startY = 0; // el的scroll纵向向初始位置
let gapY = 0; // 鼠标点击时的纵向初始位置
el.addEventListener("mousedown", start);
el.addEventListener("mouseleave", stop); // 移除时解除事件
function start(event) {
// 判断是否点击鼠标左键
if (event.button == 0) {
gapX = event.clientX;
gapY = event.clientY;
startX = el.scrollLeft;
startY = el.scrollTop;
el.addEventListener("mousemove", move); // document
el.addEventListener("mouseup", stop);
}
// event.preventDefault(); // 阻止默认事件或冒泡 如拖拽时选中文本
return false;
}
function move(event) {
// 移动时的坐标 - 鼠标左键点击时的坐标 = 鼠标移动的相对距离
var left = event.clientX - gapX;
var top = event.clientY - gapY;
// 滚动条初始坐标 - 移动的相对距离 = 应该滚动后的坐标
el.scrollTo(startX - left, startY - top); // 横向 纵向
return false;
}
function stop() {
// 鼠标松开，解除绑定
el.removeEventListener("mousemove", move, false);
el.removeEventListener("mouseup", stop, false);
}
}
/**
* @description 滚轮缩放元素
* @param targetEl 被缩放目标元素
* @param wrapperEl 产生缩放的包裹元素，默认是targetEl的父元素
*/
function addScale(targetEl, wrapperEl) {
var scale = 1; // 初始缩放比率
var scalePercent = 0.2; // 缩放系数（越大缩放跨度越大）
var minScale = 0.1; // 最小缩放比率
var maxScale = 5; // 最大缩放比率
var transformOrigin = "left top"; // 以左上角为基准点，不会造成元素超出左、上边界而没有滚动条问题
wrapperEl = wrapperEl || targetEl.parentElement; // 默认取父元素
wrapperEl.addEventListener("mousewheel", onMouseWheel);
// 鼠标滚轮事件
function onMouseWheel(e) {
// var e = e || window.e;
var down = true; // 定义向下滚动的标志
down = e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0;
// 鼠标滚轮向下缩小
if (down) {
scale = (parseFloat(scale) - scalePercent).toFixed(2);
if (scale > minScale) {
targetEl.style.transform = "scale(" + scale + ")";
targetEl.style.transformOrigin = transformOrigin;
} else {
scale = minScale;
}
} else {
// 鼠标滚轮向上放大
scale = (parseFloat(scale) + scalePercent).toFixed(2);
if (scale < maxScale) {
targetEl.style.transform = "scale(" + scale + ")";
targetEl.style.transformOrigin = transformOrigin;
} else {
scale = maxScale;
}
}
if (e.preventDefault) {
/*FF 和 Chrome*/
e.preventDefault(); // 阻止默认事件
}
return false;
}
}
addEventListener("onload", addDragable(document.getElementById("dragableWrapper")))
addEventListener("onload", addScale(document.getElementById("dragable")))
// addEventListener("onload", addScale(document.getElementById("dragable"), document.getElementById("dragable"))) // 仅在元素本身生效
script>
<style>
.wrapper {
width: 1000px;
height: 500px;
padding: 200px;
overflow: auto;
border: 2px ridge rgb(65, 194, 227);
}
h2 {
user-select: none;
}
.row {
user-select: none;
white-space: nowrap;
}
.box {
display: inline-block;
width: 300px;
height: 300px;
background-color: rgb(43, 229, 235);
}
.row:last-child .box:last-child {
position: relative;
}
.row:last-child .box:last-child .copyright {
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
opacity: .2;
}
style>
html>
如有帮助请
- 点赞
- 收藏
- 转发