原生js实现放大镜组件

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

功能需求：

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

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

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

下面附上代码：

html结构 ：

zoom.js文件，创建放大镜组件：

iconlist.js文件，创建下方图标列表，并完成翻页效果：

utils.js文件，是一个工具包：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。