本文参照了作者https://blog.csdn.net/ppfxdj/article/details/92065269修改
效果如下
点击遮罩层可以关闭图片，或者点击这个按钮，由于时间关系，样式没调过来这个按钮稍微定位一下就可以
废话不多说直接上代码，可兼容小屏幕电脑或手机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片放大</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul,li{margin:0;padding:0;list-style: none}
#box{
width:600px;
height:400px;
margin:20px auto;
}
ul li{
float: left;
width:200px;
height:200px;
}
img{
width:100%;
height:100%;
}
.mark{
width:100%;
height:100%;
background:#000;
opacity: 0.8;
position: fixed;
top: 0;
left: 0;
}
/*修改pic的宽高,可调整图片大小*/
.pic{
width:80%;
height:500px;
position: fixed;
left: 10%;
top: 20%;
}
span{
position: fixed;
width:20px;
height:20px;
left:450px;
top:50px;
background: #fff;
text-align: center;
}
</style>
</head>
<div id='box'>
<ul>
<!--插入图片-->
<li><img src="../static/vue-photo-preview/demo/2.jpg" alt=""></li>
<li><img src="../static/vue-photo-preview/demo/3.jpg" alt=""></li>
<li><img src="../static/vue-photo-preview/demo/2.jpg" alt=""></li>
<li><img src="../static/vue-photo-preview/demo/3.jpg" alt=""></li>
<li><img src="../static/vue-photo-preview/demo/2.jpg" alt=""></li>
<li><img src="../static/vue-photo-preview/demo/3.jpg" alt=""></li>
</ul>
<!-- <div class='mark'></div>
<img src="../static/vue-photo-preview/demo/3.jpg" class='pic'>
<span>X</span> -->
</div>
<script>
var lis=document.getElementsByTagName('li');
var box=document.getElementById('box');
//遍历所有的li,单击的是哪个li里的图片src 。
// 创建div className='mark' 追加到box
// 创建img src className 追加到box
// 创建span innerHTML=X 追加到box
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
//console.log(this)
var newDiv=document.createElement('div'); //定义好创建的元素
newDiv.className='mark'; //创建div的时候class类名为mark
box.appendChild(newDiv); //#box下创建div
var newImg=document.createElement('img');
newImg.className='pic';
newImg.src=this.getElementsByTagName('img')[0].src; //创建img的时候src路径为当前点击的图片
// newImg.src=this.childNodes[0].src;
box.appendChild(newImg);
var newSpan=document.createElement("span");
newSpan.innerHTML='X';
box.appendChild(newSpan);
newSpan.onclick=function(){ //span创建了关闭事件，点击删除以下元素
box.removeChild(newDiv);
box.removeChild(newSpan);
box.removeChild(newImg);
}
newDiv.onclick = function(){ //div也创建了关闭事件，点击删除以下元素
box.removeChild(newDiv);
box.removeChild(newSpan);
box.removeChild(newImg);
}
}
}
</script>
</body>
</html>
以上代码实现了简单的点击图片能够放大的效果，没有其它的效果，如有逻辑不清晰，或者有更好的实现方法可以加我扣1344160559一起探讨。
