实现原理
大图上的放大镜：小图的显示区域=大图片大小：小图片大小=大图片的offsetLeft：小图片的offsetLeft
那么以上的公式中只有大图片的offsetLeft 是未知的，所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft
代码中有详细注释
完整代码
注：复制到本地后自行替换图片查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
【商品放大镜效果实现原理】
商品放大镜效果是电商网站中常见的一种交互设计，它能够为用户提供更加细致的商品展示，增强用户体验。这种效果通常通过JavaScript实现，利用原生JS可以更好地控制性能和兼容性。主要原理是通过一个小图（通常是缩略图）和一个大图（展示放大细节）的配合，当用户在小图上移动鼠标时，实时更新大图的显示区域，以达到放大镜的效果。
在实现过程中，关键在于计算大图的显示区域与小图的相对位置关系。根据放大镜效果的规则，小图的显示区域与大图的显示区域应该保持相同的比例。具体公式为：
大图的显示区域 = 大图片大小 : 小图片大小 = 大图片的offsetLeft : 小图片的offsetLeft
由此我们可以推导出：
大图片的offsetLeft = 大图片大小 / 小图片大小 * 小图片的offsetLeft
这里的`offsetLeft`表示元素相对于其最近非静态定位祖先元素的左边界的距离。因此，我们需要实时监测小图的鼠标移动事件，并根据上述公式调整大图的显示。
在提供的代码中，主要涉及以下几个关键元素和CSS样式：
1. `#demo` - 外围容器，包含小图和大图，设置相对定位以供内部元素绝对定位。
2. `#small-box` - 包含小图和放大镜浮层（`#float-box`）的容器，设置相对定位。
3. `#float-box` - 放大镜浮层，透明半透明背景，用于视觉效果，设置绝对定位。
4. `#mark` - 透明遮罩层，用于遮盖小图，防止鼠标穿透，设置绝对定位。
5. `#big-box` - 大图容器，设置绝对定位，隐藏初始状态，仅在放大镜效果激活时显示。
6. `#small-box img` 和 `#big-box img` - 分别是小图和大图，小图用于交互，大图用于显示放大细节。
JavaScript部分主要逻辑如下：
1. 使用`addloadEvent`函数确保代码在页面加载完成后执行，避免因图片未加载完成导致的问题。
2. 获取相关DOM元素，如`#small-box`、`#float-box`、`#mark`、`#big-box`以及小图和大图的图片元素。
3. 添加鼠标移动事件监听器，当鼠标在小图上移动时，计算放大镜浮层的位置以及大图显示区域。
4. 更新`#float-box`的位置，使其跟随鼠标移动，同时根据公式计算并设置`#big-box`内大图的`left`和`top`属性，改变大图显示区域。
5. 当鼠标离开小图时，恢复大图和浮层的默认状态。
为了查看效果，需要将这段代码复制到本地HTML文件中，并替换`<img>`标签中的`src`属性为实际图片路径。这样，一个基本的商品放大镜效果就实现了。这个效果可以进一步优化，例如添加平滑过渡动画，提升用户体验。
