纯js实现点击预览图片效果

效果如图所示

 

具体实现如下

//点击放大
function clickImg(){
    var lis=document.getElementById('imgList').getElementsByTagName('li');
    var box=document.getElementById('feedBack');
    //遍历所有的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].οnclick=function(){
            //console.log(this)
            var  newDiv=document.createElement('div');
            newDiv.style="width:600px;height:400px;position: absolute; background:#000;opacity: 0.6;top:100px;left:300px";
            var  newImg=document.createElement('img');
            newImg.style="position: absolute; background:#000;top:130px;left:450px;width:300px;height:300px;";
            newImg.src=this.getElementsByTagName('img')[0].src;

            var newSpan=document.createElement("div");
            newSpan.appendChild(newDiv);
            newSpan.appendChild(newImg);
            box.appendChild(newSpan);

            newSpan.οnclick=function(){
                box.removeChild(newSpan);
            }
        }
    }
}