主要用到函数
鼠标按下：onmousedown鼠标移动：onmousemove鼠标抬起：onmouseup代码
<!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>.btn_box {width: 1000px;margin: 30px auto;display: flex;justify-content: space-between;align-items: center;}.container_box {width: 1000px;height: 800px;overflow: hidden;margin: 30px auto;border: 5px solid pink;position: relative;}</style><body><div class="btn_box"><button onclick="zoomOut()">缩小</button><button onclick="reset()">重置</button><button onclick="zoomIn()">放大</button></div><div class="container_box"><div id="barcon" name="barcon" style="position: relative; cursor: grab; background-color: pink;"><img width="100%" src="./v2-3ae61d96831a9c1bbde55abff947d200_1440w.jpg" /></div></div><script>let zoomNumber = 1;const box = document.getElementById("barcon");// 缩小function zoomOut() {if (zoomNumber > 1) {zoomNumber -= 0.5;}box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}// 放大function zoomIn() {zoomNumber += 0.5;box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}// 重置function reset() {box.style.left = "0px";box.style.top = "0px";zoomNumber = 1;box.style.transform = `scale3d(${zoomNumber}, ${zoomNumber}, 1) rotate(0deg)`;}const drag = (obj) => {// 鼠标被按下obj.onmousedown = (event) => {event = event || window.event;// 阻止默认事件event.preventDefault();// 鼠标手obj.style.cursor = "grabbing";// 最大移动距离var maxMoveX = obj.clientWidth - 50;var maxMoveY = obj.clientHeight - 50;// 计算鼠标当前坐标 = 鼠标按下坐标 - 元素当前坐标(距离父元素距离)// div的水平偏移量 鼠标.clentX - 元素.offsetLeft// div的垂直偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - obj.offsetLeft;var ot = event.clientY - obj.offsetTop;// 绑定鼠标移动事件document.onmousemove = (event2) => {event2 = event2 || window.event;// 计算移动距离 = 当前鼠标坐标 - 鼠标按下坐标var left = event2.clientX - ol;var top = event2.clientY - ot;// 判断左右移动距离if (left >= maxMoveX) {left = maxMoveX;} else if (left <= (-maxMoveX)) {left = -maxMoveX;}// 判断上下移动距离if (top >= maxMoveY) {top = maxMoveY;} else if (top <= (-maxMoveY)) {top = -maxMoveY;}obj.style.left = left + "px";obj.style.top = top + "px";}// 绑定鼠标松开事件document.onmouseup = () => {// 取消鼠标移动事件document.onmousemove = null;document.onmouseup = null;// 还原鼠标手obj.style.cursor = "grab";}}}drag(box);</script></body></html>
