前端电商项目常用组件——放大镜

放大镜

1. 我们在写前端电商项目的时候，到查看商品详情页，基本上都会用到图片展示，当我们鼠标放上去的时候，旁边会有一个放大的图片去展示。
2. 下面是用vue2.0来写的一个放大镜效果，html结构，这里主要要注意的是我们要有两个空的div标签，一个用来绑定鼠标事件，一个用来做我们的遮罩层（蒙板）

<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样式，这里要注意的是mask遮罩层一定是一个定位元素，因为只有定位元素我们才能获取到他的top和left，从而去进行一些操作，还有遮罩层的大小要根据我们的图片放大比例去设置

<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. JavaScript事件逻辑，这里要注意的点就是边界问题，还有就是大图的单位要设置成负的

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