layui鼠标放上图片局部放大_基于 Vue 的商品主图放大镜方案

扫码关注公众号「政采云前端团队」，获取更多不掺水的原创好文～

前言

在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于 Vue 的第三方包不多并且无法直接复用，今天，我来分享一种高鲁棒性的基于 Vue 的图片放大镜方法。

实现原理

放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。

图 1 原理图(以 2 倍放大为例)

相信原理图已经画的很明白了，图中，左侧框是小图框，其蓝色区域为图片遮罩层(需放大区域)，右侧框是整个大图目前所在区域，其蓝色区域是放大区域，设置超出隐藏，就实现了放大遮罩区域的效果。

显然，两块蓝色区域存在着某种对应关系，即遮罩的左上角位置(相对于小图，以下称 X 坐标)和放大区域(相对于大图)的左上角位置是成比例的，即放大倍数。计算出 X 坐标后，适当调整背景图的位置，使大图向反方向移动 scale 倍的 X 坐标即可。

X 坐标为(maskX，maskY)，以计算 maskX 为例：

鼠标移动中会产生 e.clientX，标识鼠标与浏览器左侧的距离，小图与浏览器左侧的距离是 left ，由于遮罩始终是一个以鼠标为中心的正方形，所以：

maskX = e.clientX - left - mask/2

同理，

maskY = e.clientY - top - mask/2

大图的对应样式设置为：

{  left: - maskX * scale + 'px';  top: - maskY * scale + 'px';}

效果演示

图 2 长图展示

图 3 宽图展示

图 4 两倍放大效果图