实现放大镜效果

分类: 文章 • 2023-11-16 23:22:16

实现原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮罩层，通过定位遮罩层的位置来定位大图片的相对位置，而且，遮罩层的移动应该和大图片的移动方向相反
关键：大图片和小图片大小比例应该和遮罩层的大小和放大显示区域的比例相同；
难点：计算遮罩层来显示相应大图片的位置
话不多说直接看代码
代码
实现放大镜效果
html：

css：