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

·  阅读 4669

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

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

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

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

我们主要来看看js代码,

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

最好,如果觉得有收获,点个收藏和留言探讨哦!复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改