2021-3-29 上班第四天记录(上)--LayUI-表格里放图片(点击可放大)

最新推荐文章于 2022-10-06 22:20:36 发布
最新推荐文章于 2022-10-06 22:20:36 发布
阅读量143 收藏 2
点赞数 4
分类专栏： 工作-LayUI 文章标签： layui js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/115303230
版权

layui-表格里依次排列图片，且点击对应的图片，该图片会放大

CSS:
让点击后放大的图片更美观
显得更美观
需要实现的样式效果(与之相对应的是下面的JS)：
在这里插入图片描述

JS：
在表格里依次排列图片
for循环
点击图片后，图片放大
封装函数show_img

结果：
红色框里的部分(在表格里依次排列图片)
结果图
点击图片后放大
点击图片后放大

小呀小萝卜儿
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
springboot使用layui数据表格 并显示图片
Roys-的博客
09-20 701
springboot使用layui数据表格 并显示图片 后台返回数据 List<ShopCar_domain> shopCar_domains = shopCarService.selectShopCarByUserID(user); System.out.println(shopCar_domains); return shopCar_domains; 前台js table.render({ elem: '#shopcar'
layui 多张图片上传且默认显示
小妮子
05-07 250
layui 多张图片上传且默认显示 <!-- HTML结构 --> <!-- 多张图片的HTML结构 --> <div class="layui-form-item"> <label class="layui-form-label"><span class="x-red">*</span>多张图片</label> <div class="layui-in
layui表格排序显示图片
我的代码没有bug的博客
08-19 277
最终效果： js代码： layui.use('table', function () { var table = layui.table; table.render({ elem: '#companyBoxB', url: ‘’ ,//数据接口 height: 285, method:
2021-3-31 工作记录--LayUI-小知识(在表单右边加上灰色字体)+将前端的信息转到后台去(非常重要！非常重要！非常重要！)
weixin_48850734的博客
03-31 188
1、小知识 代码： 结果： 2、将前端的信息转到后台去的方法(非常重要！非常重要！非常重要！)： 第一步：先在代码中输入： {:dump($data)} 对应结果： 第二步：然后在需要的地方依次输入： {dollar符号data.data.××} 注意： (1)、只有input中才有value值，所以在input中就输入value="{dollar符号data.data.××}"；不是input的话，则需要在对应位置输入{dollar符号data.data.××} (2)、假如要设置日期格式，则va
2021-04-01 工作记录--LayUI-工具条事件（在表格的每一行加上 查看、编辑、删除、修改 这样类似的操作按钮）
weixin_48850734的博客
04-02 467
工具条事件： 1、说明： 2、LayUI查找步骤： 3、使用方法：
layui表格内放置图片,并点击放大的实例
01-19
我就废话不多说了，直接上代码吧！ cols: [[ //表头 { field: 'brand_img_url', title: '图片', sort: true, templet: function(d){ return '(this)><img src='+d.brand_img_url+'></a></div>'; } } ]] /...
最新layui离线文档layui-v2.68全栈镜像含PDF文档2021-10-12.zip
10-13
3. **组件丰富**：layui内置了众多实用组件，如表格、表单、按钮、图片上传、提示信息、树形结构、时间选择器、轮播图、对话框、菜单等，涵盖了日常开发的大部分需求。 4. **易于上手**：layui的API设计直观易懂，...
解决layui-table单元格编辑只能text问题
10-18
在IT行业中，前端开发是至关重要的一个环节，而layui是一款优秀的国产前端UI框架，它以其简洁、优雅的设计和丰富的功能深受开发者喜爱。本篇将详细探讨如何解决layui-table单元格编辑仅支持text问题，以便在实际项目...
layui-表格穿梭-transferTable-源码
最新发布
10-16
在给定的"layui-表格穿梭-transferTable-源码"资源中，我们主要关注的是layui框架中的一个特定组件——穿梭框（Transfer Table）。这个组件在数据管理和筛选时非常有用，尤其适用于需要在两个列表之间移动或选择项的...
layui图片懒加载-loading占位图
weixin_34217711的博客
12-14 485
前言 使用layui的图片懒加载，发现未加载的图片没有loading占位图，显示的是裂图，看着不是很好。找了一些解决方法我统一记录一下。 layui图片懒加载使用方法 1 layui.use(’flow’, function(){ 2 var flow = layui.flow; 3 //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加...
多图片预览-左右切换查看-兼容PC、移动端
05-24
点击查看图片预览，支持多图片预约，可左右切换查看，兼容PC、移动端
侧边栏卡片式菜单导航
09-13
侧边栏卡片式菜单导航，多个导航样式进行切换，使用jQuery+css3
解决layui的input独占一行的问题
12-09
1.input标签独占一行，与button标签无法同行显示 （使用position属性进行设置，position属性详见。） 解决方法： 一.对button的position进行设置，使之与input同行。 二.将input与button放在一个大div中，然后将input的div的class定义成layui-inline，button放在独自的div里时也要定义div的class为layui-inline； （如果想让几个input同行，就把他们放在一个大的div里，大的div的class为layui-input-item，然后设置每个包含input的div的属性为layui-inlin
CheckBoxList两列并排编译为表格显示具体实现
01-02
代码如下: <asp ID=”DDLGroups” runat=”server” RepeatLayout=”Table” RepeatColumns=”2″ RepeatDirection=”Horizontal” xss=removed> </asp> 代码如下: <style type=”text/css”> #DDLGroups{border-collapse:collapse; line-height:18px} #D
CSS实现2D卡片翻转特效
m0_61486963的博客
10-06 1115
🦖我是Sam9029，一个前端`最近在重温学习CSS transform 和 transition以及 CSS 的 2D 效果 remote（记得以前好像有个什么游戏来着也有这种特效，一时间给忘了有些记不起来了）
我很喜欢研究这些比较酷的效果
u011927449的博客
04-09 181
js手机端每周课程表代码https://www.mk2048.com/demo/demo_target_desc.php?id=ja1kaj1jjs课程表，日程表插件。设置每周学习课程，适用于手机端课程安排事项代码。通过js数组来定义每个时间段课程安排。ps：不兼容IE6,7,8jQuery挑战拼图小游戏代码https://www.mk2048.com/demo/demo_target_desc....
js实现多个列表展开收缩类似手风琴效果
xiaowang_test的博客
10-12 2713
实现效果大概是多个卡片默认均隐藏详情部分，点击展开可查看该卡片详情，点击收起详情隐藏；同时只展开一个，即某个展开时其他的均收缩状态。 设计思路： 详情模块与展开按钮各设置两个样式类，即默认样式类与展开样式类。每个卡片默认样式类display：none，展开按钮默认样式不设置旋转角度。点击展开按钮后，通过js语句定位到使用展开类名的元素的位置，利用arrt方法将样式类名换为默认样式类，用同样的方法更改展开按钮的样式；将当前卡片及展开按钮的样式该改为展开样式类（通过设置按钮元素css-transform的旋转
前端H5可视化拖拽布局器-Layui,Bootstrap等各种UI-可视化表单设计器
热门推荐
adyuebanwan的专栏
05-08 7万+
本节介绍一款前端H5可视化布局器 MagicalDrag2.1.5 由js+css+html编写而成 软件官方在线使用地址：http://layuiout.magicalcoder.com/layui 在线使用：免费 优点在于 功能强大，可以自由嵌入各种web项目，有html+css+js编写而成,可以基于各种设备响应式设计布局 软件基本截图主界面 （图片拉扯了好难看） 各种下拉编辑...
关于在layui的数据表格中使用 layui.photo 点击放大图片和切换左右图片
weixin_42974569的博客
09-09 4099
换不多说，直接上效果图， 第一次点击图片的时候需要点两下！！！ 我这里用的是layui的数据表格，来看代码： 这个是绑定部分，d.table_img是图片地址数组。我这里循环了，class用的是demo+当前行的id，直接固定class的话会展示全部图片 <script id="showScreenhost" type="text/html"> <div style="float:left;" class="demo{{d.table_id}}" &gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值