本文实例为大家分享了JS实现京东放大镜效果的具体代码，供大家参考，具体内容如下
需要实现的效果图如下：
①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片，这里提供左边的图片b3.png和右边的大图片big.jpg:
注意：左边盒子里面的cover采用绝对定位，右边盒子里面的img采用绝对定位。
②功能实现：主要有三个功能模块：
1.鼠标经过（mouseover）左边盒子，黄色的遮罩层以及右边盒子显示，鼠标离开（mouseout）则隐藏黄色遮罩层以及右边盒子。
2.黄色遮罩层跟随鼠标移动（mousemove）。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标，但是又因为鼠标是在遮罩层的中间，所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件：就是黄色遮罩层的移动距离，黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。
3.移动黄色遮罩层，大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算：
遮挡层的移动距离上一点已经算过了，遮罩层的最大移动距离上面也说了，剩下的就是大图片最大移动距离，大图片最大移动距离=图片的大小-右边盒子的大小。
最后全部代码如下：
html代码：
京东放大镜效果
- 全部商品分类
- 服装城
- 美妆馆
- 传智超市
- 全球购
- 闪购
- 团购
- 拍卖
- 有趣
相关推荐
使用自己的数据训练Yolov4-tiny模型，并用tensorrt运行（配置github host、编译安装opencv4.1.1+contrib和darknet、制作数据集、训练全流程）
《动手学深度学习-pytorch》书中定义函数后加#@save的含义
如何在react中使用pixi快速的做一个的炫酷的刹车特效！（全注释，附源码）
LeetCode高频题：擂台赛n名战士战斗力最接近的两名战士，战斗力之差为多少
MonoJSG：联合语义和几何代价函数的单目3D目标检测（CVPR2022）
【SIGIR 2022】面向长代码序列的Transformer模型优化方法，提升长代码场景性能
OpenHarmony加速行业应用落地，多款软件发行版正在通过兼容性测评