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