前言

客服小姐姐说她的照片在后台显得太小了,想放大点让大家欣赏欣赏她的神仙颜值 好家伙直接修改代码(其实是项目经理发现说你这个图片怎么双击不放大,完了今天工资不保 慌得一批,幸好我机中生智的说是我考虑不周了 我马上给它添加这项功能 。经理说好 不急 今天下午弄好就行(因为当时项目已经基本全完成了哈哈哈))兄弟们不要犯我这种低级错误 一定一定要多考虑考虑。

代码

 {field: 'addressimg',//需要改成自己的字段名
                    width:80,
                    title: '作者头像',
                    templet: function (d) {
                        return '<div onclick="show_img(this)"><a><img  src="'+d.addressimg+'" alt="" style="width: 36px;height: 36px"/></a></div>';
                    }
                },

Js

 //显示大图片
        window.show_img = function (t){
            var t = $(t).find("img");
            //页面层
            layer.open({
                type: 1,
                title:false,
                shade:[0.3,'#000'],//黑色背景(0.3代表颜色深度)
                skin: 'layui-layer-rim', //加上边框
                area: ['80%', '80%'], //宽高
                resize:false,//不可拖拽缩放
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
            });
        };

效果图

小姐姐是我编的,但想让兄弟们学技术是真的

相关资源

layui表格实现图片上传功能