直接上代码
<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() {
var zoom = parseInt(this.$refs.imgDiv.style.zoom) || 100;
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>