博客

首先我们先看一张图片，看下是不是客官你所需要找的

功能：动态插入标签图片，点击图片放大，点击大图外的任意地点即放小

老baby我们开始吧

先上图后讲解

由于我们每个图框里都会不规定的有多张图片，那这样的话我们就要动态的插入图片了。首先在form表单中我们做一个隐藏的文本框用于接受遍历照片数据

<input type="hidden" th:value="${siteRoom.meterpic}" id="meterpicid">

我们使用var meterpicid=$(“#meterpicid”).val();取出遍历的照片名字

var meterpicidnum=meterpicid.split(“,”);为切割，由于我们数据库存储的照片是一个字段存储多张的照片的名字的，所以要切割开单独取出名字

 for (var i=0;i<meterpicidnum.length;i++){

        htmlimg+="<img style='width:150px;height:128px' src='"+imgServerPath+meterpicidnum[i]+"' class='layui-upload-img'></img>";
}
}else {
    document.getElementById("meterpic").parentNode.innerHTM="[无图片]";
}

document.getElementById("addtd").innerHTML=htmlimg;

做个for循环，根据它的长度循环插入照片，addtd是在form表单里设置的标签插入循环拿出的照片地址

图片弹出

照片已经放好了那么就要让他弹出了

//图片弹出
$(".layui-upload-img").click(function() {

    var src=$(this).attr("src");
    var imghtml="<img src='"+src+"' width='500px' height='500px'></img>"

    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        area: '500px',
        skin: 'layui-layer-nobg', //没有背景色
        shadeClose: true,
        content: imghtml
    });

})

$(“.layui-upload-img”).click(function() 是什么呢，想到了吗？layui-upload-img是我们在插入img标签时定义的一个class,往上看for循环里这段代码

	htmlimg+="<img style='width:150px;height:128px' src='"+imgServerPath+meterpicidnum[i]+"' class='layui-upload-img'></img>";

我们获得他的src也就是照片的地址，重新定义一个img标签给他长度和宽度，给到一个定义的imghtml

然后看layer.open layui的弹窗，将imghtml给到content就能弹出重新定义的照片了。