京东图片放大镜效果

vue插件之vue-piczoom 图片放大镜介绍_流码的博客-CSDN博客

关于放大镜的盒子基于body定位

html

  <div class="big_picture">
          <pic-zoom :url="big_picture" :scale="3"></pic-zoom>
  </div>

css

    .big_picture {
        overflow: hidden !important;
        img {
            height: 100% !important;
            width: 100% !important;
            object-fit: contain;
        }
        width: 340px;
        height: 340px;
        background-color: $commonColor;
    }

在app.vue--css

<style>
/* 设置商城放大镜效果 */
.mouse-cover-canvas {
    position: absolute;
    border: 2px solid red !important;
}
</style>