美文网首页
点击图片弹出大图

点击图片弹出大图

作者: f1a94e9a1ea7 | 来源:发表于2018-11-12 21:41 被阅读3次

    点击图片弹出大图
    demo
    源码

    大体步骤:

    1. 获取图片元素,监听点击事件
    let imgs = document.querySelectorAll('.wrap img')
    for(let i=0; i < imgs.length; i++) {
                imgs[i].addEventListener('click', function(e) {
                })
            }
    
    1. 点击后获取到点击图片的 src
    this.src
    
    1. 生成<img>元素,添加到父元素里去
     document.querySelector('.pop-wrap ul').innerHTML = `<li><img src=${this.src} /></li>`
    

    相关文章

      网友评论

          本文标题:点击图片弹出大图

          本文链接:https://www.haomeiwen.com/subject/bpkhfqtx.html