给文章中的图片添加点击放大效果怎么实现，我们可以用下面的代码。

这两个js和css文件需要引用一下，放在头部head中

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>

文件下载：

然后在底部文件中加入如下代码：

<script type="text/javascript">
const bodyimg = document.querySelectorAll(".article_content img")
//.article_content img定位要放大的图片区域
    if(bodyimg.length>=1){
        for(let i=0;i<bodyimg.length;i++){
            let imgsrc = bodyimg[i].src,
                imgbox = document.createElement("a");
            imgbox.setAttribute("data-fancybox","gallery");
            imgbox.setAttribute("href",imgsrc);
            bodyimg[i].parentNode.insertBefore(imgbox, bodyimg[i]);
            imgbox.appendChild(bodyimg[i]);
        }
    };
</script>

这样就实现了点击文章中的图片，就可以放大了。