原生JS实现图片放大和关闭效果

效果图:

css

<style>
    *{
    
    
        margin:0;
        padding:0;
    }
    #box{
    
    
        width: 1440px;
        height: 540px;
        margin: 0 auto;
        position: relative;
    }
    li{
    
    
        width: 480px;
        height: 270px;
        float: left;
        list-style: none;
    }
    span{
    
    
        position:absolute;
        top:50%;
        left:50%;
        margin-Top:-200px;/*正是下 负是上*/
        margin-Left:450px;/*正是右 负是左*/
        background:red;
        width:20px;
        height:20px;
        text-align: center;
    }
</style>

html

<div id="box">
    <ul>
        <li><img src="img/1.jpg" alt=""></li>
        <li><img src="img/2.jpg" alt=""></li>
        <li><img src="img/3.jpg" alt=""></li>
        <li><img src="img/4.jpg" alt=""></li>
        <li><img src="img/5.jpg" alt=""></li>
        <li><img src="img/6.jpg" alt=""></li>
    </ul>
</div>

JS

<script>
    //获取标签
    var lis=document.getElementsByTagName("li");
    var box=document.getElementById("box");
    //单击事件
    for(var i=0;i<lis.length;i++){
    
    
        lis[i].index=i;
        lis[i].onclick=function() {
    
    
            var div=document.createElement("div");
            div.style.width="1440px";
            div.style.height="540px";
            div.style.position="absolute";
            div.style.top="0px";
            div.style.left="0px";
            div.style.background="rgba(20,20,20,0.3)";
            var img=document.createElement("img");
            img.src=this.firstElementChild.src;
            console.log(img);
            img.style.width="900px";
            img.style.height="400px";
            img.style.position="absolute";
            img.style.top="50%";
            img.style.left="50%";
            img.style.marginTop="-200px";
            img.style.marginLeft="-450px";
            var spa=document.createElement("span");
            spa.innerHTML="X";
            div.appendChild(spa);
            div.appendChild(img);
            box.appendChild(div);
            spa.onclick=function() {
    
    
                div.style.display="none";
            }
        }
    }
</script>