一、类淘宝放大镜
效果图:

原理图:

关键点:放大镜是等比例缩放的,公式如下图所示:

demo地址:codepen.io/JMHello/pen…
二、鼠标悬停放大镜
效果图:

原理图:

关键点:由于是等比例缩放图片,所以大图和小图的中心点是一样的,我们最终是要求出放大镜距离大图的left值和top值。
公式如下:
bigImgX = glassX + glassWidth / 2 * zoom - glassWidth / 2;
bigImgY = glassY + glassHeight / 2 * zoom - glassHeight / 2;
demo地址:codepen.io/JMHello/pen…