Vue实现商品详情鼠标移动+放大显示图片细节

效果图

代码实现

<template>
  <div>
    <div style="position: relative;" class="box">
      <img @mousemove="updatePositions"
        src="https://img.pddpic.com/gaudit-image/2023-07-09/36b632c77506c42d1bc206924a054310.jpeg" alt="" />

      <div v-if="moveVisiable" class="move" @mouseout="()=>moveVisiable = false" style="" @mousemove="updatePosition"
        :style="draggableStyle"></div>
      <div class="preview" v-if="moveVisiable">
        <img :style="detailImageStyle"
          src="https://img.pddpic.com/gaudit-image/2023-07-09/36b632c77506c42d1bc206924a054310.jpeg" width="800px"
          height="800px" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        top: 0,
        left: 0,
        offset: {
          x: 200,
          y: 200
        },
        moveVisiable: false,
        animationFrameId: null,
      }
    },
    computed: {
      detailImageStyle() {
        return {
          transform: `translate(${-this.offset.x}px, ${-this.offset.y}px)`
        };
      },
      draggableStyle() {
        return {
          transform: `translate(${this.offset.x}px, ${this.offset.y}px)`
        };
      }
    },
    methods: {
      name() {

      },
      updatePositions(event) {
        // console.log('event: ',event);
        const {
          clientX,
          clientY
        } = event;
        const x = event.clientX - 50;
        const y = event.clientY - 50;

        this.offset = {
          x: Math.min(Math.max(x, 0), 300),
          y: Math.min(Math.max(y, 0), 300)
        };
        this.moveVisiable = true;
      },
      updatePosition(event) {
        const {
          clientX,
          clientY
        } = event;
        console.log('clientY: ', clientY, 'clientX: ', clientX);
        if (!this.animationFrameId) {
          this.animationFrameId = requestAnimationFrame(() => {
            const x = event.clientX - 50;
            const y = event.clientY - 50;

            this.offset = {
              x: Math.min(Math.max(x, 0), 300),
              y: Math.min(Math.max(y, 0), 300)
            };
            // this.offset = {
            // x:x<0?0:x,
            // y:y>300?300:y
            // };
            this.animationFrameId = null;
          });
        }
      }
    },
  }
</script>

<style scoped>
  .box {
    height: 400px;
    width: 400px;
  }

  .move {
    cursor: move;
    width: 100px;
    height: 100px;
    background-color: #faebd7a1;
    position: absolute;
    top: 0px;
    border: 1px dashed orange;
  }

  .preview {
    overflow: hidden;
    position: absolute;
    width: 600px;
    height: 600px;
    left: 400px;
    top: 0;
  }
</style>