如何用JavaScript编写实现京东商品图片放大镜功能？

本文共计1392个文字，预计阅读时间需要6分钟。

原文示例：本文实例为大家分享了JS实现京东放大镜效果的完整代码，供大家参考，具体内容如下+需要实现的效果图如下：+布局：布局采用一个大方框，首先分为上下两部分+

改写后：本文实例展示了如何用JS实现京东放大镜效果，代码如下，效果参考图见下+布局结构：布局以一个大框为主，先分为上下两个区域+

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

需要实现的效果图如下：

①布局：布局采用一个大盒子里面首先分为上下两个部分，然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover，右边盒子里面放的是800*800的大图片，这里提供左边的图片b3.png和右边的大图片big.jpg:

注意：左边盒子里面的cover采用绝对定位，右边盒子里面的img采用绝对定位。

②功能实现：主要有三个功能模块：

1.鼠标经过（mouseover）左边盒子，黄色的遮罩层以及右边盒子显示，鼠标离开（mouseout）则隐藏黄色遮罩层以及右边盒子。

2.黄色遮罩层跟随鼠标移动（mousemove）。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标，但是又因为鼠标是在遮罩层的中间，所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件：就是黄色遮罩层的移动距离，黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。

3.移动黄色遮罩层，大图片跟随移动功能。