純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);
            }
        }
    }
}