小冬SEO

给文章中的图片添加点击放大源码

2021-11-09 11:53:58 12006 网站建设

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

这两个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>

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

测试图片

版权保护: 本文由小冬SEO编辑发布,转载请保留链接: https://www.cdseoyh.cn/jianzhan/137.html

小冬SEO 草根seoer,从事搜索引擎关键词优化,喜欢学习专研各类SEO优化技巧—小冬SEO博客
  • 138文章总数
  • 12007本页访问
  • 运营时间
  • 标签

    友情链接

      {dede:sql sql="select url,webname from dede_flink where typeid = (select id from dede_flinktype where typename=~typename~)"}
    • [field:webname/]
    • {/dede:sql}