效果如图所示
具体实现如下
//点击放大function clickImg(){var lis=document.getElementById('imgList').getElementsByTagName('li');var box=document.getElementById('feedBack');//遍历所有的li,单击的是哪个li里的图片src 。// 创建div className='mark' 追加到box// 创建img srcclassName 追加到box// 创建span innerHTML=X 追加到boxfor(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);}}}}
