layui 表格图片放大

Posted cjjjj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui 表格图片放大相关的知识,希望对你有一定的参考价值。

1. 表格塞图片

,{title: ‘图片‘, width:120, templet: function(d) {
                                        return ‘<div onclick="show_img(this)" ><img src="‘+d.image_path+‘" ‘ +
                                        ‘ width="50px" height="50px"></a></div>‘;

                                    }}

2. 图片放大

//显示大图片
        function show_img(t) {
            var t = $(t).find("img");
            //页面层
            layer.open({
                type: 1,
                skin: ‘layui-layer-rim‘, //加上边框
                area: [‘80%‘, ‘80%‘], //宽高 t.width() t.height() 
                shadeClose: true, //开启遮罩关闭
                end: function (index, layero) {
                    return false;
                },
                content: ‘<div style="text-align:center"><img src="‘ + $(t).attr(‘src‘) + ‘" /></div>‘
            });
        }

 

以上是关于layui 表格图片放大的主要内容,如果未能解决你的问题,请参考以下文章

layuiLayui实现数据表格中鼠标悬浮图片放大效果

layui——上传图片,并实现放大预览

layui点击图片放大

Layui:数据表格table中预览图片视频

fastadmin 框架中图片点击放大

layui数据表格(一:基础篇,数据展示分页组件表格内嵌表单和图片)