使用原生JS实现图片放大镜效果

前提先了解数学算法：
求遮罩层mask宽度
大图、大图显示区、小图、遮罩层
1、小图是大图等比缩放的
2、遮罩层是大图显示区缩放的
小图/大图 = 遮罩层/大图显示区
遮罩层 = 大图显示区*(小图/大图);
------------------------------------------------
大图活动区 = 大图-大图显示区
小图活动区 = 小图-遮罩层
遮罩层偏移量/小图活动区 = 大图偏移量/大图活动区
大图偏移量 = 大图活动区*(遮罩层偏移量/小图活动区)
大图偏移量 = (大图-大图显示区)*(遮罩层偏移量/(小图-遮罩层))

放大镜 == 100*100橘色方块 简称：方块1

左窗口 == 200*200蓝色方块 简称：方块2

右窗口 == 200*200紫色方块 简称：方块3

原图 == 400*400青色方块 简称：方块4

用一个表达式就是：方块1的left值（或top值）/方块4的left值（或top值）=（-1）*方块2的宽度/方块四的宽度。这里我们需要注意的是方块1的定位父级是方块2，方块4的定位父级是方块3。另外小图的长宽与左窗口的长宽保持一致。我们等比例地根据方块1的top值和left值去修改方块4的top值和left值，并且方块超出部分不可见，就可以实现放大镜效果。

分解动作：
1、布局
2、计算遮罩层宽高度
3、为small绑定移入移出事件处理
4、为small绑定鼠标移入事件处理
4.1、计算mask的偏移量
(e.clientX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2)
4.2、规定mask的最大最小偏移量
4.3、计算大图偏移量(参照公式)

注意事项：
1、鼠标移入和鼠标移动事件应该加给small
2、offsetX/offsetY 值不准确，应该使用clientX/clientY代替

效果图：

源码：

还有jqzoom插件实现放大镜效果：

链接：https://pan.baidu.com/s/1FwUEYyzhqnO31-uZqtSPPw
提取码：t7yf

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！