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

点击图片弹出大图

作者: 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>`

相关文章

  • 点击图片弹出大图

    点击图片弹出大图demo源码 大体步骤: 获取图片元素,监听点击事件 点击后获取到点击图片的 src 生成 元素,...

  • 图片点击放大

    介绍与原理   图片点击放大为点击图片时,页面弹出该图片的大图。这样可以在布局时使用缩略图,而当用户需要查看大图时...

  • 轻松学习swift--swift项目初体验(一)

    项目需求:做一个图片浏览器,点击图片查看大图,大图模式下,左右滚动能查看不同的图片.项目的主要核心技术:图片的弹出...

  • 生命周期

    实例: 效果图: 点击确定弹出: 点击确定弹出:

  • 点击图片弹出大图,再点击屏幕缩小回原图效果

    先上效果图,看看是不是你需要的: 点击后效果分别为: 两种逻辑:一种是展示图宽大于高,则宽度满屏,高度同比例缩放;...

  • 键盘代理多次触发,偏移异常

    现象描述: 点击UITextView,键盘会弹出。然后点击添加图片,弹出了ActionSheet,键盘自动收缩。接...

  • iOS -- 图片处理

    一、目录 1> 图片拉伸处理 2> 图片扩展名 3> 大图减小高度,图片拉伸处理 4> 点击大图,Modal出来,...

  • ios内存优化

    大图(GIF)引发的CPU内存暴涨 起因:在app首页有一个小的广告弹框,点击就弹出大图由于每次点击都会去请求最新...

  • 好产品如何从0到1(二)

    编辑搜图 请点击输入图片描述 编辑搜图 请点击输入图片描述 编辑搜图 请点击输入图片描述 编辑搜图 请点击输入图片...

  • 待办卡片背景太花了,如何关闭?

    在新建待办时会为这个待办随机分配一张图片,您可以长按卡片,点击编辑,在弹出的编辑框中点击更换背景图来更改图片。 如...

网友评论

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

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