Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

如下所示：

var tableIns = window.demoTable = table
  .render({
   elem : '#idTest',
   id : 'idTest',
   url : '<%=path%>/partyMember/getPartyMembersByOrgCode',
   //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();//显示大图
    $('table tr').on('click',function(){
      $('table tr').css('background','');
      $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
     });
   }
  });

在done函数中调用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实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用js在layui中实现上传图片压缩

    一.关于js上传图片压缩的方法,百度有很多种方法,这里我参考修改了一下 function photoCompress(file, w, objDiv) { var ready = new FileReader(); /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ ready.read

  • layui的table中显示图片方法

    图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="text/javascript"> layui.use('table',function () { var table= layui.table; table.render({ elem:'#needstable' ,url:'{:url()}' ,method:'post' ,cellMinWidth:80 ,

  • ThinkPHP5+Layui实现图片上传加预览功能

    html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

  • layui表格内放置图片,并点击放大的实例

    我就废话不多说了,直接上代码吧! cols: [[ //表头 { field: 'brand_img_url', title: '图片', sort: true, templet: function(d){ return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="

  • layui中layer前端组件实现图片显示功能的方法分析

    本文实例讲述了layer前端组件实现图片显示功能的方法.分享给大家供大家参考,具体如下: 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案, 致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 官网下载地址:http://layer.layui.com/ 或者点击此处本站下载. 里面有具体的使用方法 这里注意几点:在使用layer前端组件之前,我们要引入layer的js文件 <script

  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下 首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(

  • Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

    如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},

  • 转换layUI的数据表格中的日期格式方法

    转换layUI的数据表格中的日期格式 前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da

  • Layui给数据表格动态添加一行并跳转到添加行所在页的方法

    Layui是一个前端 UI 框架,该框架风格优雅,但由于发布时间较短,很多功能并没有提供实现. 笔者在使用Layui的数据表格的时候,需求是这样的:当点击添加按钮的时候,就在数据表格最后动态添加一行.上述功能官方并没有给出实现,需要自己手动解决. 解决思路及方案 简单分析:根据需求--动态添加一行,首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr,但由于数据表格的每一行的每一个单元格都有其样式,因此,要想动态添加的一行与Layui数据表格渲染出来的每一行

  • js实现鼠标移入图片放大效果

    js实现鼠标移入图片放大效果

    使用原生js编写一个鼠标移入图片放大效果,供大家参考,具体内容如下 目标 给图片添加鼠标移动放大方法效果,移到哪里放大哪里 先看看效果是不是你想要的,再看代码 移入前 移入后 html <!-- css看着写 -->     <div class="Box" style="width:200px;height:200px;border:1px solid #f00;position: relative;top:0;left:0;overflow: hidde

  • 一个跟随鼠标的图片放大效果，与FF兼容

    一个跟随鼠标的图片放大效果，与FF兼容

    <div align=center style="overfow: hidden; width: 100px; height: 100px"><img src="http://files.jb51.net/upload/2007426163751315.jpg" width="100" height="100" border="0" onmouseover="show(this)

  • 解决Layui数据表格中checkbox位置不居中的方法

    1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,

  • Layui弹框中数据表格中可双击选择一条数据的实现

    Layui提供的功能如下(预览) 可自行查看:layui官网此模块的链接 着急看双击选中 直接看标黄色部分 假设这是个弹窗里的表格和数据点击圆圈,圆圈变绿则为选中,选中后点击上方查看数据按钮(实际中是确认按钮,实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中) Layui提供的代码如下(查看代码) <body> <!-- 表格空架子 --> <table class="layui-hide" id="test" lay-fil

  • layui的数据表格+springmvc实现搜索功能的例子

    如下所示: 主要在前端页面加: <div class="demoTable"> 搜索ID: <div class="layui-inline"> <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off"> </div> <span class=&

  • layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能（ajax异步）

    layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo

  • layui之数据表格--与后台交互获取数据的方法

    jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, height : "full-125", limit

随机推荐