vue实现商品放大镜效果

前言

一般电商类网页，如淘宝、京东，都会有商品主图实现放大镜效果的场景，今天来简单实现一个类似的放大镜功能

效果展示

当鼠标在主图上移动时，出现一个绿色的图片遮罩层，同时右侧出现一个大图预览区，用于展示绿色区域图片的放大效果，由此就实现了图片放大镜效果。具体效果：

具体实现

1.页面布局

设置一个图片展示框元素，该元素中包括需要展示的主图图片，用于鼠标移动事件的元素，大图预览区（使用定位，展示在图片展示框的右侧），图片遮罩层

<div class="spec-preview"><img :src="imgUrl" alt="" /><div class="event" @mousemove="handler"></div><div class="big"><img :src="imgUrl" alt="" ref="big" /></div><!-- 遮罩层 --><div class="mask" ref="mask"></div>
</div> 

2.核心css代码a. 用于鼠标移动事件的元素，大图预览区，图片遮罩层这三个元素都需要相对于图片展示框元素使用绝对定位展示b. 用于鼠标移动事件的元素和父元素的宽高一样，并且层级最高c. 大图预览区