实现放大镜效果

csdn1313

于 2019-02-12 19:12:34 发布

阅读量601

点赞数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/csdn1313/article/details/87108233

版权

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

css：

在这里插入图片描述

js
在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。