直接上代码
<template><div class="boxsd left" @mousewheel.prevent="rollImg"><div ref="imgDiv" class="img"><img src="../../../assets/map.png" @mousedown="move"/><div>标记</div></div></div></template><script>export default{methods:{rollImg() {/* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;/* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */zoom += event.wheelDelta / 12;/* 最小范围 和 最大范围 的图片缩放尺度 */if (zoom >= 70 && zoom < 500) {this.$refs.imgDiv.style.zoom = zoom + "%";}return false;},move(e) {e.preventDefault();// 获取元素var left = document.querySelector(".left");var img = document.querySelector(".img");var x = e.pageX - img.offsetLeft;var y = e.pageY - img.offsetTop;// 添加鼠标移动事件left.addEventListener("mousemove", move);function move(e) {img.style.left = e.pageX - x + "px";img.style.top = e.pageY - y + "px";}// 添加鼠标抬起事件，鼠标抬起，将事件移除img.addEventListener("mouseup", function() {left.removeEventListener("mousemove", move);});// 鼠标离开父级元素，把事件移除left.addEventListener("mouseout", function() {left.removeEventListener("mousemove", move);});},}}</script><style>.boxsd{width: 800px;height: 800px;background-color: #000;overflow: hidden;position: relative;border: 1px solid red;>div{position: absolute;width: 2000px;height: 800px;>img{width: 100%;height: 100%;cursor: move;}>div{position: absolute;top: 0;left: 200px;color: red;}}}</style>
