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


Posted in Javascript onSeptember 10, 2019

我就废话不多说了,直接上代码吧!

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="50px"></a></div>';
      }
    }
 ]]
//显示大图片
    function show_img(t) {
      var t = $(t).find("img");
      //页面层
      layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
         area: ['80%', '80%'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
          return false;
        },
        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
      });
    }

以上这篇layui表格内放置图片,并点击放大的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
javascript Object与Function使用
Jan 11 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
用js实现in_array的方法
Nov 05 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
layui监听工具栏的实例(操作列表按钮)
Sep 10 #Javascript
es6中reduce的基本使用方法
Sep 10 #Javascript
layui导出所有数据的例子
Sep 10 #Javascript
解决layui-open关闭自身窗口的问题
Sep 10 #Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 #Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 #Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php include类文件超时问题处理
2015/02/06 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python 写的一个爬虫程序源码
2016/02/28 Python
关于Python数据结构中字典的心得
2017/12/04 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
党员廉洁自律承诺书
2014/05/26 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
运动会广播稿20字
2015/08/19 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
MySQL数据库事务的四大特性
2022/04/20 MySQL