如何用原生JavaScript编写一个放大镜功能组件？

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

原文示例为：本文字例为大家分享了js实现放大镜组件的开发整体代码，供大家参考，具体内容如下+功能需求：1、根据图片数组创建标签列表；2、鼠标滑过标签时，当前标签增加红色边框；3、鼠标移出时，恢复默认样式。

改写后为：分享js放大镜组件代码，含功能需求：1. 创建图片标签列表；2. 鼠标悬停标签变红框；3. 鼠标离开恢复原样。

本文实例为大家分享了js实现放大镜组件开发的具体代码，供大家参考，具体内容如下

功能需求：

1、根据图片数组创建图标列表；
2、鼠标滑过图标时，当前图标增加红色边框；
3、鼠标滑过图标时，上方图片区域显示对应的图片，右侧显示放大后的图片内容；
4、鼠标在图片区域移动时，在右侧实现放大效果；
5、下方图标列表，点击左右按钮，实现翻页效果；
6、当图标内容不够一页时，只移动到最后一个图标的位置；

以京东的详情页为例，看一下效果：

放大镜内容写在 Zoom.js 文件里，下方的图标列表内容写在 IconList.js 文件里，当鼠标滑过下面的图标时，需要更改放大镜里div的背景图片，这里用到了事件抛发。