效果:
思路: 在外层box进行相对定位relative,img设置绝对定位absolute;通过监听滚轮事件(wheel),设置样式缩放中心点(transformOrigin)和缩放转换(transform);获取到图片大小和位置,设置对应图片宽度高度和top、left偏移;鼠标按下事件(mousedown)和鼠标移动事件(onmousemove),得出图片移动偏移量。
详细代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>图片拖拽与缩放</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
top: 200px;
left: 500px;
width: 800px;
}
</style>
</head>
<body>
<div class