Layui 数据表格显示图片，鼠标滑过图片放大

Layui 数据表格显示图片，鼠标滑过图片放大

<sricpt>
table.render({
    elem: '#images',
    cellMinWidth: 80,
    url: '/........', //数据接口
    limit: 10,
    page: true, //开启分页
    cols: [
        [ //表头
            {
                field: 'id',
                title: 'ID',
                sort: true,
                fixed: 'left'
            },
            {
                field: 'images',
                title: '图片',
                templet: '#showimg'  //自定义显示图片方法
            }
        ]
    ], 
    done:function(res,curr,count){
            hoverOpenImg();//显示大图
            $('table tr').on('click',function(){
                $('table tr').css('background','');
                $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
            });
        }
});
 
function hoverOpenImg(){
    var img_show = null; // tips提示
    $('td img').hover(function(){
        var kd=$(this).width();
        kd1=kd*3;          //图片放大倍数
        kd2=kd*3+30;       //图片放大倍数
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(41,41,41,.5)']
            ,area: [kd2+'px']
        });
    },function(){
        layer.close(img_show);
    });
    $('td img').attr('style','max-width:70px;display:block!important');
}
</sricpt>
<script type="text/html" id="showimg">
    <img src="{{ d.images}}"/>
</script>

原文：https://blog.csdn.net/yuzsmc/article/details/81977768