【layui数据表格】显示图片，鼠标进入图片，图片变大

最新推荐文章于 2024-10-30 22:43:34 发布

原创最新推荐文章于 2024-10-30 22:43:34 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片放大效果。当鼠标悬停在表格中的图片上时，图片会放大显示，提供更好的查看体验。文章详细展示了如何利用layui框架和layer插件来实现这一功能。

实现效果如何，鼠标移动到图片上，图片自己放大！

在这里插入图片描述

 <table class="layui-hide" id="ContractCheck"></table>
        <script>
            layui.use('table', function () {
                var table = layui.table;
                table.render({
                    elem: '#ContractCheck'
                    , url: " http://localhost:8839/NO1/V1/ContractCheck/GetAllContract"
                    , parseData: function (res) {
                        if (res.length == 0) {
                            return {
                                "code": 0,
                                "msg": "",
                                "data": res
                            }
                        }
                        else {
                            return {
                                "code": 0,
                                "msg": "",
                                "count": res[0].total,
                                "data": res
                            }
                        }
                    }
                    , groups: 10
                    , layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
                    , cellMinWidth: 60 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                        { type: 'checkbox', fixed: 'left' }
                        , { fixed: "", field: 'contract_Year', title: '年份', sort: true, templet: '#yearFormat', align: 'center', width: 90 }
                        , { field: 'organization', title: '期数', sort: true, align: 'center', width: 90 }
                        , { field: 'user_name', title: '姓名', align: 'center', width: 90, fixed: '' }
                        , { field: 'contract_Name', title: '合同', align: 'center', width: 200 }

                        , { field: 'contract_Copy_Url', title: '合同扫描件', templet: '#ContractPicture', align: 'center', width: 120 }
                        , { filed: 'showScreenhost', title: '缴费截图', align: 'center', width: 400, templet: '#showScreenhost' } /*< div > {{ showScreenhost(d.id) }}</div >*/
                        , { field: 'sc_check_state', title: '截图状态', align: 'center', templet: '#CheckState', width: 100 }
                        , { field: 'operate', title: '提醒', toolbar: '#barDemo', align: 'center', width: 100 }
                        , { fixed: 'right', title: '操作', toolbar: '#barOperator', align: 'center', width: 220 }
                    ]]
                    , page: true
                    , even: true
                    // , skin: 'line' //表格风格
                    , id: 'ContractReload'
                    , 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 * 6;          //图片放大倍数
                        kd2 = kd * 5 + 100;       //图片放大倍数
                        var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;'  margin=0px padding=0px/>";
                        img_show = layer.tips(img, this, {
                            tips: [2, 'rgba(41,41,41,.0)']
                            , area: [kd2 + 'px']
                        });
                    }, function () {
                        layer.close(img_show);
                    });
                    $('td img').attr('style', 'max-width:70px;display:block!important');
                }