프런트 엔드 전자 상거래 프로젝트의 공통 구성 요소 - 돋보기

돋보기

1. 우리는 프론트엔드 전자상거래 프로젝트를 작성할 때 기본적으로 사진을 사용하여 제품 상세 페이지를 보고 마우스를 올려놓으면 그 옆에 확대된 사진이 표시됩니다.
2. 다음은 vue2.0으로 작성된 돋보기 효과 및 html 구조입니다. 여기서 주의해야 할 점은 두 개의 빈 div 태그가 필요하다는 것입니다. 하나는 마우스 이벤트 바인딩용이고 다른 하나는 마스크 레이어( mask)용입니다.

<template>
 <div class="spec-preview">
   <img :src="skuImageObj.imgUrl" />
   <div class="event" @mousemove="handler"></div>
   <div class="big">
     <img :src="skuImageObj.imgUrl"  ref="big"/>
   </div>
   <div class="mask" ref="mask"></div>
 </div>
</template>

3. CSS 스타일, 여기에서 마스크 레이어는 위치 지정 요소여야 합니다. 위치 지정 요소만 상단과 왼쪽을 가져와 일부 작업을 수행할 수 있고 마스크 레이어의 크기는 그림 확대/축소에 따라 달라지기 때문입니다. 설정하기 위해

<style lang="less">
.spec-preview {
    
    
 position: relative;
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;

 img {
    
    
   width: 100%;
   height: 100%;
 }

 .event {
    
    
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 998;
 }

 .mask {
    
    
   width: 50%;
   height: 50%;
   background-color: rgba(0, 255, 0, 0.3);
   position: absolute;
   left: 0;
   top: 0;
   display: none;
 }

 .big {
    
    
   width: 100%;
   height: 100%;
   position: absolute;
   top: -1px;
   left: 100%;
   border: 1px solid #aaa;
   overflow: hidden;
   z-index: 998;
   display: none;
   background: white;

   img {
    
    
     width: 200%;
     max-width: 200%;
     height: 200%;
     position: absolute;
     left: 0;
     top: 0;
   }
 }

 .event:hover ~ .mask,
 .event:hover ~ .big {
    
    
   display: block;
 }
}
</style>

4. 자바스크립트 이벤트 로직, 여기서 주의할 점은 경계 문제이고, 큰 이미지의 단위는 음수로 설정해야 합니다.

methods: {
    
    
    handler(e) {
    
    
      let big = this.$refs.big;
      let mask = this.$refs.mask;
      let left = e.offsetX - mask.offsetWidth / 2;
      let top = e.offsetY - mask.offsetHeight / 2;
      // 限制边界
      if (left < 0) {
    
    
        left = 0;
      }
      if (top < 0) {
    
    
        top = 0;
      }
      if (left > mask.offsetWidth) {
    
    
        left = mask.offsetWidth;
      }
      if (top > mask.offsetHeight) {
    
    
        top = mask.offsetHeight;
      }
      // 注意这里必须要加单位
      mask.style.left = left + "px";
      mask.style.top = top + "px";
      // 这个是展示框固定，图片移动所以要是负的
      big.style.left = -2 * left + "px";
      big.style.top = -2 * top + "px";
    },
  },