layui点击表格图片放大

最新推荐文章于 2024-09-12 17:39:09 发布

新手村代码小白

最新推荐文章于 2024-09-12 17:39:09 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： layui 表格图片点击放大

本文链接：https://blog.youkuaiyun.com/kongbai953/article/details/97371657

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在表格中展示图片并实现点击放大预览功能的方法。通过使用layui的layer插件，可以轻松地在点击图片时弹出一个全屏预览窗口，提升用户体验。代码示例详细展示了如何配置表格的imgurl字段以及定义点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格代码

                        {
                            field: "imgurl", title: "图片", templet: function (item) {
                                return '<img onclick="showimg(this)" id="driimg" style="display: inline-block; width: 50%; height: 100%;" src="'+item.imgurl+'">';
                            }
                        },

点击事件

    function showimg(t) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="'+t.src+'">'
        });
    }