当鼠标悬在layui表格里的图片上，图片显示大图

夏木子杉

已于 2024-02-02 09:28:13 修改

阅读量636

点赞数 8

文章标签： layui 前端 javascript

于 2024-02-02 09:27:23 首次发布

本文链接：https://blog.csdn.net/Life_Effort/article/details/135986389

版权

实现下面这种效果

<table class="layui-hide" id="userinfo" lay-filter="userinfo"></table>

layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#userinfo'
                , url: '__URL__/guide_info'
                , method: 'post'
                , page: true
                , limit: 10
                , width: 1540
                , cols: [[
                    { field: 'imageurl', title: '引导图', width: 200,  align: 'center', event: 'showImage' }
                    , { field: 'description', title: '图片描述', width: 400, align: 'center', }
                    , { field: 'sequence', title: '图片次序', width: 120, sort: true, align: 'center' }
                    , { field: 'categoryname', title: '行业', width: 100, align: 'center' }
                    , { field: 'organizename', title: '组织', width: 280, sort: true, align: 'center' }
                    , { field: 'enable', title: '是否可用', width: 100, align: 'center' }
                    , { field: 'createtime', title: '创建时间', width: 180, align: 'center' }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , id: 'testReload'
                , done: function (res, curr, count) {
                    hoverOpenImg();//显示大图
                    res.data.forEach(function (data) {
                        var id = data.id;
                        var enable = data.enable;
                        // 显示启用或禁用按钮
                        if (enable == "不可用") {
                            $('#start_using_' + id).show();
                        } else {
                            $('#stop_using_' + id).show();
                        }
                    })
                }
            });
           
            function hoverOpenImg() {
                var img_show = null;
                $('td img').hover(function () {
                    var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:300px;' />";
                    img_show = layer.tips(img, this, {
                        tips: [2, 'rgba(41,41,41,.5)']
                        , area: ['330px']
                    });
                }, function () {
                    layer.close(img_show);
                });
                $('td img').attr('style', 'max-width:70px');
            }
}

生成表格后在done方法里渲染就可以了。

完结撒花。