图片点击预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<style type="text/css">
.zhezhaoceng {
position: fixed;
width: 100%;
top: 0;
bottom: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
<body>
<div class="zhezhaoceng">
<img src="" id="zheZhaoImg">
</div>
<img src="img/indexLogo.png" onclick="see()" class="imgYuLan">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type = "text/javascript" >
function see() {
var src = $('.imgYuLan')[0].src;
$("#zheZhaoImg").attr("src", src);
$(".zhezhaoceng").css("display", "flex");
layer.closeAll(); //疯狂模式，关闭所有层
};
//图片预览，点击关闭
$(".zhezhaoceng").click(function(){
$(".zhezhaoceng").css("display","none");
});
</script>
</body>
</html>
点击图片预览，点击阴影退出预览
3586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
