<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片拖拽与缩放</title>
<style>
* {
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
img{
position: absolute;
top: 300px;
left: 400px;
width: 600px;
}
</style>
</head>
<body>
<div class="box">
<img id="imgg" src="./c.jpg">
</div>
<script>
//初始化缩放倍数
let god_big = 1;
//监听滚轮事件
imgg.addEventListener("wheel", (event) => {
event.preventDefault();
//获取是向上滚还是向下滚
let delta = event.deltaY;
let flag_big = 0;
if(delta > 0){
god_big -= 0.2;
}else{
god_big += 0.2;
}
let img_tag = document.getElementById("imgg");
//计算鼠标点击相对于元素的偏移量
const offsetX = (event.clientX - img_tag.getBoundingClientRect().left) / img_tag.getBoundingClientRect().width;
const offsetY = (event.clientY - img_tag.getBoundingClientRect().top) / img_tag.getBoundingClientRect().height;
//缩放中心点
const transformOrigin = `${offsetX * 100}% ${offsetY * 100}%`;
img_tag.style.transformOrigin = transformOrigin;
img_tag.style.transform = `scale(${god_big})`;
let img_width = img_tag.getBoundingClientRect().width;
let img_height = img_tag.getBoundingClientRect().height;
let img_left = img_tag.getBoundingClientRect().left;
let img_top = img_tag.getBoundingClientRect().top;
img_tag.style.left = img_left+'px';
img_tag.style.top = img_top+'px';
img_tag.style.width = img_width+'px';
img_tag.style.height = img_height+'px';
img_tag.style.transform = 'scale(1)';
img_tag.style.transformOrigin = '0 0';
god_big = 1;
});
imgg.addEventListener("mousedown", (event) => {
event.preventDefault();
let img_tag = document.getElementById("imgg");
let img_width = img_tag.getBoundingClientRect().width;
let img_height = img_tag.getBoundingClientRect().height;
let img_left = img_tag.getBoundingClientRect().left;
let img_top = img_tag.getBoundingClientRect().top;
let x = event.clientX;
let y = event.clientY;
document.onmousemove = (event) => {
let move_x = event.clientX - x;
let move_y = event.clientY - y;
img_tag.style.left = img_left + move_x + 'px';
img_tag.style.top = img_top + move_y + 'px';
}
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
}
});
</script>
</body>
</html>
js实现图片的拖拽与缩放
于 2023-08-30 13:57:07 首次发布