Vue3에서 Taobao 돋보기 효과를 얻는 방법

구현 효과

구현 아이디어

애니메이션 사진에서 타오바오 돋보기 효과를 구현하려면 4단계가 필요합니다.

1. 작은 그림 상자, 마스크, 큰 그림 상자의 레이아웃을 완성합니다.
2. 마스크와 큰 그림 상자를 표시하기 위해 작은 그림 상자에 마우스 움직임을 구현합니다.
3. 작은 그림 상자 안에서 이동
4. 마스크의 이동 범위는 작은 그림 상자를 초과할 수 없으며 이동 시 큰 그림 상자가 이동됩니다

작은 그림 상자, 마스크, 큰 그림의 레이아웃을 완성합니다. box

내 레이아웃의 작은 그림 상자는 그림, 마스크, 큰 그림 상자를 감싸줍니다.
작은 그림 상자가 상대적으로 배치되어 있습니다. 마스크, 큰 그림 상자, 큰 그림 그림은 모두 절대적으로 위치가 지정됩니다(큰 그림 그림은 위치를 지정하지 않으면 이동할 수 없습니다). 마스크는 투명도를 설정해야 합니다. 효과를 얻을 수 있는 한.

마스크와 큰 그림 상자를 표시하려면 작은 그림 상자로 마우스를 이동하십시오.

작은 그림 상자는 마우스 이동 이벤트(mouseover) 및 마우스 이동 이벤트(mouseout)에 바인딩됩니다. 이벤트가 트리거될 때마다 상태를 전환합니다.

썸네일 상자에서 이동하려면 마우스 이동 마스크를 구현하세요.

썸네일 상자는 mousemove 마우스 이동 이벤트를 바인딩합니다. 페이지에 있는 마우스의 x 좌표에서 작은 그림 상자의 OfferLeft는 상자 왼쪽에 있는 마우스입니다. 이는 마우스를 중앙에 놓으려는 경우 마스크를 이동해야 하는 좌표입니다. 마스크를 2로 나눕니다. y 좌표도 마찬가지입니다.
마스크의 이동 범위는 작은 그림 상자를 초과할 수 없으며, 큰 그림의 움직임은 큰 그림의 움직임을 구동합니다.
경계 값이 0보다 작거나 같을 경우 왼쪽을 설정합니다. x의 경계 값은 실제로 작은 상자의 너비에서 마스크 너비를 뺀 값입니다. 같은 방식으로 y축은 작은 상자의 높이에서 마스크의 높이를 뺀 값입니다.
대형 이미지의 움직임을 유도하는 데에는 비례 관계가 있습니다. 큰 그림의 이동거리 = 마스크의 이동거리 * 큰 상자의 최대 이동거리 / x 마스크의 최대 이동거리,

풀코드

<template>
  <div
    class="tb-booth"
    @mouseover="onMouseOver"
    @mouseout="onMouseOut"
    @mousemove="onMouseMove"
    ref="boothRef"
  >
    <img
      src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png_430x430q90.jpg"
    />
    <div class="mask" ref="mask" v-show="boxShow" />
    <div class="big-img_box" ref="bigImgBox" v-show="boxShow">
      <img
        class="big-img"
        ref="bigImg"
        src="https://img.alicdn.com/imgextra/i3/1917047079/O1CN01lkG2pf22AEUi1owve_!!1917047079.png"
      />
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
export default {
  setup() {
    const boothRef = ref(null);
    const mask = ref(null);
    const bigImg = ref(null);
    const bigImgBox = ref(null);
    const state = reactive({
      boxShow: false
    });
    const onMouseOver = () => {
      state.boxShow = true;
    };
    const onMouseOut = () => {
      state.boxShow = false;
    };

    const onMouseMove = (e) => {
      let x = e.pageX - boothRef.value.offsetLeft;
      let y = e.pageY - boothRef.value.offsetTop;
      let maskX = x - mask.value.offsetWidth / 2;
      let maskY = y - mask.value.offsetHeight / 2;
      // mask的x最大移动距离
      let maskXMaxMove = boothRef.value.offsetWidth - mask.value.offsetWidth;
      let maskYMaxMove = boothRef.value.offsetHeight - mask.value.offsetHeight;
      let bigImgXMaxMove =
        bigImgBox.value.offsetWidth - bigImg.value.offsetWidth;
      let bigImgYMaxMove =
        bigImgBox.value.offsetHeight - bigImg.value.offsetHeight;
      if (maskX <= 0) {
        maskX = 0;
      } else if (maskX >= maskXMaxMove) {
        maskX = maskXMaxMove;
      }
      if (maskY <= 0) {
        maskY = 0;
      } else if (maskY >= maskYMaxMove) {
        maskY = maskYMaxMove;
      }
      mask.value.style.left = maskX + "px";
      mask.value.style.top = maskY + "px";
      // 大图片移动距离 = mask的移动距离*大盒子最大移动距离 / mask的x最大移动距离
      let bixImgXMove = (maskX * bigImgXMaxMove) / maskXMaxMove;
      let bixImgYMove = (maskY * bigImgYMaxMove) / maskYMaxMove;
      bigImg.value.style.left = bixImgXMove + "px";
      bigImg.value.style.top = bixImgYMove + "px";
    };
    return {
      ...toRefs(state),
      boothRef,
      mask,
      bigImg,
      bigImgBox,
      onMouseOver,
      onMouseOut,
      onMouseMove,
    };
  },
};
</script>
<style scoped>
.tb-booth {
  width: 430px;
  height: 430px;
  position: relative;
  border: 1px solid #cccccc;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: rgb(61, 110, 206);
  opacity: 0.5;
  cursor: move;
}

.big-img_box {
  position: absolute;
  top: 0;
  left: 530px;
  width: 500px;
  height: 500px;
  background-color: #fff;
  border: 1px solid #cccccc;
  overflow: hidden;
}
.big-img {
  position: absolute;
  left: 0;
  top: 0;
}
</style>

위 내용은 Vue3에서 Taobao 돋보기 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!