京东图片放大镜效果

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>