Componentes comunes de los proyectos de comercio electrónico front-end - lupa

lupa

1. Cuando escribimos proyectos de comercio electrónico front-end, básicamente usamos imágenes para ver la página de detalles del producto. Cuando colocamos el mouse sobre él, habrá una imagen ampliada al lado para mostrar.
2. El siguiente es un efecto de lupa y una estructura html escrita en vue2.0. Lo principal a tener en cuenta aquí es que necesitamos dos etiquetas div vacías, una para vincular eventos del mouse y otra para nuestra capa de máscara (máscara)

<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. Estilo CSS, aquí cabe señalar que la capa de máscara debe ser un elemento de posicionamiento, porque solo el elemento de posicionamiento podemos obtener su parte superior e izquierda, para realizar algunas operaciones, y el tamaño de la capa de máscara depende de nuestra imagen Zoom en establecer

<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. Lógica de eventos de JavaScript, el punto al que se debe prestar atención aquí es el problema de los límites, y la unidad de la imagen grande debe establecerse en negativo

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";
    },
  },