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

灰太狼 2023-06-20 10:53 755阅读 0赞

效果如图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70][]

具体实现如下

![20191210103922871.png][]

>     //点击放大
>     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);
>                 }
>             }
>         }
>     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191210103741327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzNDg4NQ==,size_16,color_FFFFFF,t_70
[20191210103922871.png]: https://img-blog.csdnimg.cn/20191210103922871.png