原生js实现放大镜特效-创新互联

本文实例为大家分享了js实现放大镜特效的具体代码，供大家参考，具体内容如下

掌握页面元素定位和移动

放大镜关键原理：鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置定位大图片的相应位置

技术点：事件捕获、定位

offsetLeft与style.left的对比：
1）offsetLeft是与父级元素的距离，不包过滚动条的距离
2）style.left返回的是字符串，如30px，offsetLeft返回的是数值30
3）style.lft是可读写的，offsetLeft是只读的，所以要改变div的位置只能修改style.left
4）style.left的值需要事先定义，否则取到的值为空
难点：计算：如何让小图片的放大镜和大图片同步移动

距离定位图解：

具体代码：

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。