关于元素背景图的平移和缩放如何处理?
关于元素背景图的平移和缩放
对一个元素进行操作,监听元素上的mousedown、move、up、whell、事件,对背景图进行变换操作,平移没什么问题,缩放的话,他的缩放中心始终在0,0,不能改变他的缩放中心,我想在缩放的同时移动他的background-position来达到类似的效果,但是没什么头绪
回复
1个回答

test
2024-06-20
问题解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.box {
width: 600px;
margin: 50px;
height: 600px;
border: 1px solid #000;
user-select: none;
color: #fff;
overflow: hidden;
position: relative;
}
img {
width: 100%;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
</style>
<body>
<div class="box">
<img src="https://pica.zhimg.com/80/v2-b3fd7b886b18c45a3623b9f13c3372c5_qhd.jpg?source=4e949a73" alt="">
</div>
<script>
let box = document.querySelector('.box');
let img = document.querySelector('img');
let isDown = false;
let downx = 0;
let downy = 0;
let position = {
x: 0,
y: 0
}
let scale = 1;
box.addEventListener('mousewheel', function (event) {
event.stopPropagation()
event.preventDefault()
let rec = img.getBoundingClientRect();
let x = (event.clientX - rec.x) / scale;
let y = (event.clientY - rec.y) / scale;
let delta = (event.wheelDelta ? event.wheelDelta : -event.deltaY);
let ls = scale // keep last scale
scale = (delta > 0) ? (scale + 0.2) : (scale - 0.2);
if (scale > 3 || scale < 0.8) {
scale = ls
return
}
let m = (delta > 0) ? 0.1 : -0.1;
let x1 = (-x * m * 2) + (img.offsetWidth * m);
let y1 = (-y * m * 2) + (img.offsetHeight * m);
position.x += x1
position.y += y1
updateTransform()
}, { passive: false });
box.addEventListener('mousedown', function (e) {
isDown = true;
downx = e.clientX - position.x;
downy = e.clientY - position.y;
});
document.addEventListener('mousemove', function (e) {
if (isDown) {
position.x = e.clientX - downx
position.y = e.clientY - downy
updateTransform()
}
});
box.addEventListener('mouseup', function (e) {
isDown = false;
});
function updateTransform() {
img.style.transform = `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`;
}
</script>
</body>
</html>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容