layui实现一个图片点击放大

2019-10-26 17:58:45  卢浮宫  版权声明：本文为站长原创文章，转载请写明出处

一、背景

    业务需求，实现一个图片点击放大功能。之前有说个一个写div，遮罩层的思路（可以参考之前的文章）

二、解决方案

    因为整体使用的是layui，所以就考虑使用layui本身实现其功能。网上查了相关资料，然后这里记录下

三、直接贴代码吧

    layer.open({

        type: 1,
        title: false,
        closeBtn: 0,//隐藏关闭按钮
        shade: [0.3, '#000'],//黑色背景（0.3代表颜色深度）
        shadeClose: true,//点击遮罩关闭大图
        area: [700 + 'px', 700 + 'px'], //宽高
        resize:false,//不可拖拽缩放
        skin: 'myskin',//大图背景色定义类
        content: "<img alt=" + "" + " title=" + "" + " src='" + url + "'/>"
    });