淘宝放大镜的简单实现，原来道理很简单

前言：自己在学习过程中构思的淘宝放大镜的实现，大佬轻喷，小白可以跟我一起探讨学习。话不多说，我们来看效果图。

首先是html结构，结构主要就三块，放大镜，小图和大图区域，我们都用div来实现。

图是在淘宝取的网络地址。

css代码我就不截图了，简单说几个需要注意的地方就行，一个就是放大镜需要设置透明度，这个透明度多少就看你自己喜欢了。第二个就是大图区的背景图需要设置为两倍的大小。当然不一定要是两倍，但一定要比本身的宽高要大，不然无法取得放大的效果。

我们主要来看看js代码，

简单解释代码： 1.鼠标移入事件，让放大镜出现，并且设置出现的位置为贴靠在小图的边缘。 2.鼠标移动事件，鼠标移动伴随着放大镜的移动。当然这里也有限制，鼠标一旦超出，放大镜就会贴靠或者消失。计算鼠标的xy值，xy值减去放大镜宽高的一半就是放大镜的xy值，通过放大镜的xy值再减去小图的xy值，就可以算出放大镜移动的距离。根据移动的距离*2，就是大图背景移动的距离。 逻辑比较绕，觉得绕的可以在纸上画个图来分辨这些距离。

最好，如果觉得有收获，点个收藏和留言探讨哦！复制代码

转载于:https://juejin.im/post/5b61ae975188251b3950f899