VUE图片跟随鼠标移动而移动

图片跟随鼠标移动而移动

图片动效

<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>