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


Posted in Javascript onSeptember 11, 2019

如下所示:

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实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法

鼠标悬浮时:

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

以上这篇Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
浅析JS中回调函数及用法
Jul 25 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
js实现打字小游戏
Dec 17 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 #Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 #Javascript
node-red File读取好保存实例讲解
Sep 11 #Javascript
vue中nextTick用法实例
Sep 11 #Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 #Javascript
如何换个角度使用VUE过滤器详解
Sep 11 #Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP安装攻略:常见问题解答(一)
2006/10/09 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Python标准库与第三方库详解
2014/07/22 Python
Python发送email的3种方法
2015/04/28 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
python通过实例讲解反射机制
2019/10/17 Python
Python ini文件常用操作方法解析
2020/04/26 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
员工自我鉴定
2013/10/09 职场文书
学期自我鉴定
2013/11/04 职场文书
安全施工责任书
2014/08/25 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书