<template>
<div class="spec-preview">
<img :src="imgUrl.imgUrl" />
<div class="event" @mousemove="changexy"></div>
<div class="big">
<img :src="imgUrl.imgUrl" ref="big" />
</div>
<div class="mask" ref="mask"></div>
</div>
</template>
methods: {
changexy(e) {
let left = e.offsetX - this.$refs.mask.offsetWidth / 2;
let top = e.offsetY - this.$refs.mask.offsetHeight / 2;
if (left < 0) left = 0;
if (left > this.$refs.mask.offsetWidth) {
left = this.$refs.mask.offsetWidth;
}
if (top < 0) top = 0;
if (top > this.$refs.mask.offsetHeight) {
top = this.$refs.mask.offsetHeight;
}
this.$refs.mask.style.left = left + "px";
this.$refs.mask.style.top = top + "px";
this.$refs.big.style.left = -2 * left + "px";
this.$refs.big.style.top = -2 * top + "px";
},
},
效果：
