原生js实现放大镜组件开发

最新推荐文章于 2024-01-28 11:48:20 发布

原创

最新推荐文章于 2024-01-28 11:48:20 发布 · 495 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

放大镜组件

功能需求：

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

以京东的详情页为例，看一下效果：
原生js实现放大镜组件开发
放大镜内容写在 Zoom.js 文件里，下方的图标列表内容写在 IconList.js 文件里，当鼠标滑过下面的图标时，需要更改放大镜里div的背景图片，这里用到了事件抛发。

下面附上代码：
html结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zoom</title>
</head>
<body>
    <script type="module">
        import Zoom from './js/Zoom.js';
        //图标数组
        let list=["a_icon.jpg","e_icon.jpg","f_icon.jpg","g_icon.jpg","h_icon.jpg","i_icon.jpg","j_icon.jpg",];
        init();
        function init(){
    
    
            let zoom=new Zoom(list,"./img/");
            zoom.appendTo("body");
        }
    </script>
</body>
</html>

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

import Utils from "./Utils.js";
import IconList from './IconList.js';
export default class Zoom{
   
   
    static styles=false;
    static small_width=450;
    static mask_width=303.75;
    static zoom_width=540;
    static SET_BG_IMG="set_bg_img";
    constructor(_list,_basePath){
   
   
        if(_basePath) _list=_list.map(item=>_basePath+item);
        //创建外层的div容器
        this.elem=this.createE();
        //监听事件，改变zoomSmall的背景图
        document.addEventListener(Zoom.SET_BG_IMG,e=>this.setBgImg(e));
        //创建下方的icon列表
        this.createIconList(_list,this.elem);
    }
    createE(){
   
   
        //创建外层div容器
        let div=Utils.createE("div");
        div.className="zoomContainer";
        div.innerHTML=`<div class="zoomSmall" id="zoomSmall"><div class="zoomMask" id="zoomMask"></div></div>
        <div class="zoomContent" id="zoomCont"></div>`;
        //设置样式
        Zoom.setStyle();
        //获取样式
        Utils.getIdElem(div,this);
        //监听鼠标滑入事件
        this.zoomSmall.addEventListener("mouseenter",e=>this.mouseHandler(e));
        return div;
    }
    appendTo(parent){
   
   
        Utils.appendTo(this.elem,parent);
    }
    setBgImg(e){
   
   
        //设置背景图片
        this.zoomSmall.style.backgroundImage=`url(${
     
     e.src})`;
        this.zoomCont.style.backgroundImage=`url(${
     
     e.src})`;
    }
    createIconList(list,parent){
   
   
        //创建下方icon图标列表
        let iconList=new IconList(list);
        Utils.appendTo(iconList.elem,parent);
    }
    mouseHandler(e){
   
   
        switch (e.type) {
   
   
            case "mouseenter":
                //鼠标滑入后，显示遮罩和右侧大图片
                this.zoomMask.style.display="block";
                this.zoomCont.style.display="block";
                //监听鼠标移动和滑出事件
                this.mouseHandlers=e=>this.mouseHandler(e);
                this.zoomSmall.addEventListener("mousemove",this.mouseHandlers);
                this.zoomSmall.addEventListener("mouseleave",this.mouseHandlers);
                break;
            case "mousemove":
                //遮罩移动
                this.zoomMaskMove(e);
                break;
            case "mouseleave":
                //鼠标滑出后，显示遮罩和右侧大图片