javascript怎么实现简单放大镜效果

这篇文章将为大家详细讲解有关javascript怎么实现简单放大镜效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一个大盒子中有一张图片，鼠标放上去会出现一个半透明的遮罩层，鼠标移动，遮罩层跟着移动，盒子旁边还有一个放大的图片，跟着遮罩层移动的位置而改变放大图的位置，鼠标离开大盒子，遮罩层和放大图片消失

实现思路

1、html、css将盒子，遮罩层、放大图片页面编辑好，设置遮罩层和放大图片默认隐藏
2、获取元素对象，将大盒子绑定鼠标事件
鼠标经过- - -mouseover，鼠标经过时设置遮罩层和放大图显示：display设置成'block'
鼠标离开- - -mouseout，鼠标经过时设置遮罩层和放大图显示：display设置成'none'
3、计算出鼠标在大盒子中的位置
4、让鼠标在遮罩层的中间位置：让遮罩层相对鼠标位置向上向左移动一半距离就行
遮罩层的位置- - -给它绝对定位，赋值相对盒子中的向上向左偏移量
5、限制遮罩层在大盒子里移动- - -判断偏移量的值，<=0 的时候，偏移量为0
6、放大图随着遮罩层的移动而改变位置
遮罩层移动值 / 遮罩层移动最大距离 = 放大图移动距离 / 放大图移动最大距离
根据这个关系式，得到放大图的移动距离
将移动距离赋值给放大图的偏移量top、left

注意：放大图的偏移量给成负值，和遮罩层移动方向相反

代码示例

页面效果：

关于"javascript怎么实现简单放大镜效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。