图片跟随鼠标移动而移动
图片动效
<template>
<div class="container" @mousemove="handleMouseMove" ref="container">
<img
ref="image"
class="background-img"
src="https://t7.baidu.com/it/u=2511982910,2454873241&fm=193&f=GIF"
/>
</div>
</template>
<script>
export default {
data() {
return {
maxDistanceX: 0,
maxDistanceY: 0,
};
},
mounted() {
const containerWidth = this.$refs.container.offsetWidth;
const containerHeight = this.$refs.container.offsetHeight;
const imageWidth = this.$refs.image.offsetWidth;
const imageHeight = this.$refs.image.offsetHeight;
this.maxDistanceX = imageWidth - containerWidth;
this.maxDistanceY = imageHeight - containerHeight;
},
methods: {
handleMouseMove(e) {
const distanceX =
((e.clientX - this.$refs.container.offsetLeft) /
this.$refs.container.offsetWidth) *
this.maxDistanceX;
const distanceY =
((e.clientY - this.$refs.container.offsetTop) /
this.$refs.container.offsetHeight) *
this.maxDistanceY;
this.$refs.image.style.transform = `translate(-${distanceX}px, -${distanceY}px)`;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
.background-img {
position: absolute;
left: 0;
top: 0;
width: 400px;
}
</style>