如何实现点击图片实现放大效果

大家好，我是wilkwo，今天给大家分享一个小功能，就是点击一个小图，出现一个弹窗，弹窗显示这个小图的放大效果。这个效果一般出现在博客内容页面，作者可能添加图片的时候是添加的缩略图，也有可能是缩小版，比如只显示30%，那么作为一名读者，一打开这个页面的时候会发现这个图特别小，但是但你再点击这个小图的话，它会弹出来一个显示正常大小图片的弹窗，类似这种效果：

其实原理就是监听这个页面的图片，然后当监点击的是图片的时候就出现弹窗，再将小图的地址放到弹窗的图片标签内。

具体实现代码可参考（vue）：

<el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
      <img :src="imgUrl" alt="" id="bigImg" />
</el-dialog>

window.addEventListener("click", (e) => {
        let target = e.target;
        if (target.tagName === "IMG") {
          this.imgUrl = target.src;
          this.dialogVisible = true;
        }
      });

本文章由javascript技术分享原创和收集