<i id='VioIA'><tr id='VioIA'><dt id='VioIA'><q id='VioIA'><span id='VioIA'><b id='VioIA'><form id='VioIA'><ins id='VioIA'></ins><ul id='VioIA'></ul><sub id='VioIA'></sub></form><legend id='VioIA'></legend><bdo id='VioIA'><pre id='VioIA'><center id='VioIA'></center></pre></bdo></b><th id='VioIA'></th></span></q></dt></tr></i><div id='VioIA'><tfoot id='VioIA'></tfoot><dl id='VioIA'><fieldset id='VioIA'></fieldset></dl></div>

      <bdo id='VioIA'></bdo><ul id='VioIA'></ul>

  1. <legend id='VioIA'><style id='VioIA'><dir id='VioIA'><q id='VioIA'></q></dir></style></legend>

    <small id='VioIA'></small><noframes id='VioIA'>

  2. <tfoot id='VioIA'></tfoot>

      Layui数据列中实现鼠标悬停图片放大离开时恢复原图

      时间:2025-09-04

      • <tfoot id='NGOoJ'></tfoot><legend id='NGOoJ'><style id='NGOoJ'><dir id='NGOoJ'><q id='NGOoJ'></q></dir></style></legend>
          <tbody id='NGOoJ'></tbody>

        <small id='NGOoJ'></small><noframes id='NGOoJ'>

        • <bdo id='NGOoJ'></bdo><ul id='NGOoJ'></ul>

              <i id='NGOoJ'><tr id='NGOoJ'><dt id='NGOoJ'><q id='NGOoJ'><span id='NGOoJ'><b id='NGOoJ'><form id='NGOoJ'><ins id='NGOoJ'></ins><ul id='NGOoJ'></ul><sub id='NGOoJ'></sub></form><legend id='NGOoJ'></legend><bdo id='NGOoJ'><pre id='NGOoJ'><center id='NGOoJ'></center></pre></bdo></b><th id='NGOoJ'></th></span></q></dt></tr></i><div id='NGOoJ'><tfoot id='NGOoJ'></tfoot><dl id='NGOoJ'><fieldset id='NGOoJ'></fieldset></dl></div>
              1. Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示:

                实现代码如下,在done函数中调用hoverOpenImg方法
                var tableIns = window.demoTable = table
                  .render({
                   elem : '#idTest',
                   id : 'idTest',
                   url : '/postData',
                   //width : 1500,
                   height : 'full',
                   cols : [ [ //标题栏
                    {checkbox : true,LAY_CHECKED : false,filter : 'test'}, 
                    {field: 'HEAD_URL', title: '头像', width: 100, align: 'center',templet:'#imgTpl'},
                
                    //{field : 'PM_CODE',title : '党员编号',width : 220,sort : true,align : 'center'}, 
                    {field : 'NAME',title : '党员姓名',width : 110,sort : true,align : 'center'}, 
                    {field : 'SEX',title : '性别',width : 70,sort : true,align : 'center',templet:'#sexTpl'}, 
                    {field : 'AGE',title : '年龄',width : 70,sort : true,align : 'center'}, 
                    {field : 'PARTY_AGE',title : '党龄',width : 70,sort : true,align : 'center'}, 
                    {field : 'BIRTH_DATE',title : '出生日期',width : 120,sort : true,align : 'center'}, 
                    {field : 'JOIN_PM_DATE',title : '入党时间',width : 120,sort : true,align : 'center'}, 
                    {field : 'FULL_PM_DATE',title : '转正时间',width : 120,sort : true,align : 'center'}, 
                    {field : 'TYPE',title : '类别',width : 120,sort : true,align : 'center',templet:'#typeTpl'}, 
                    {field : 'MOBILE_NO',title : '手机号码',width : 150,sort : true,align : 'center'}, 
                    //{field : 'CODE',title : '组织编码',width : 220,sort : true,align : 'center'}, 
                    {field : 'ORG_NAME',title : '所在支部',width : 230,sort : true,align : 'center'}, 
                    {field : 'UNIT_NAME',title : '所在单位',width : 220,sort : true,align : 'center'}, 
                    {fixed : 'right',title : '操作',width : 220,align : 'center',toolbar : '#barDemo'} ] ],
                   page : true //是否显示分页
                   ,
                   limits : [ 15, 20,50, 100 ],
                   limit : 15
                  //每页默认显示的数量
                   ,done:function(res,curr,count){
                    hoverOpenImg();//在数据表格中调用放大图片方法
                   }
                  });
                hoverOpenImg方法实现如下:
                function hoverOpenImg(){
                  var img_show = null; // tips提示
                  $('td img').hover(function(){
                   //alert($(this).attr('src'));
                   var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:130px;' />";
                   img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: ['160px']
                   });
                  },function(){
                   layer.close(img_show);
                  });
                  $('td img').attr('style','max-width:70px');
                 }
                比较好理解,当td下的img被鼠标悬浮时,构造一个img元素,通过layer.tips方法在右边渲染该图片,当鼠标离开时,使用layer.close把当前提示框关闭,同时设置了下最大宽度max-width样式。
                 
                 
                上一篇:layui点击文本输入框调起弹出选择框并选择内容的方法 下一篇:没有了

                相关文章

                最新文章

                  1. <legend id='0qbc9'><style id='0qbc9'><dir id='0qbc9'><q id='0qbc9'></q></dir></style></legend>

                  2. <small id='0qbc9'></small><noframes id='0qbc9'>

                      <bdo id='0qbc9'></bdo><ul id='0qbc9'></ul>
                  3. <i id='0qbc9'><tr id='0qbc9'><dt id='0qbc9'><q id='0qbc9'><span id='0qbc9'><b id='0qbc9'><form id='0qbc9'><ins id='0qbc9'></ins><ul id='0qbc9'></ul><sub id='0qbc9'></sub></form><legend id='0qbc9'></legend><bdo id='0qbc9'><pre id='0qbc9'><center id='0qbc9'></center></pre></bdo></b><th id='0qbc9'></th></span></q></dt></tr></i><div id='0qbc9'><tfoot id='0qbc9'></tfoot><dl id='0qbc9'><fieldset id='0qbc9'></fieldset></dl></div>

                  4. <tfoot id='0qbc9'></tfoot>