layer 点击图片缩略图弹出图片原图
项目中有一个需求,点击图片的缩略图可以弹出弹层,查看图片原图;点击关闭按钮或点击遮罩层部分关闭图片
- 代码实现如下:
- 项目是单页面,有多处需要用到查看图片详情,于是在主页面放置一个图片弹层的容器
<div id="window-img" style="display: none"></div>
- 封装一个函数,需要传入要查看的图片的路径
function windowImg(imgUrl) {$('#window-img').empty();var img = "<img class='window-img' src='"+ imgUrl +"' width='100%' />";$('#window-img').append(img);layer.open({type: 1,title: false,//resize:false,shadeClose: true,//点击遮罩关闭content:$('#window-img'),area:'auto',maxWidth: 800,cancel: function () {$('#window-img').css('display', 'none');},end:function () {$('#window-img').css('display', 'none');}});
}
- 通过点击图片事件调用
$('#img').on('click',function () {var curImgUrl = this.src;windowImg(curImgUrl);});
- 图片弹层效果图:
- 注意事项:
在写的过程中遇到了一些问题,总结一下避免再次踩坑:
- 由于弹层的图片是动态添加生成的,所以必须在调用layer.open()之前,先完成对弹层内容的渲染,这样可以实现弹层打开在页面居中~
- 由于弹层中图片显示的是原图,当图片过大时需要对它做一个最大宽高的限制,在网上找了很多方法都不是很好用,于是在img标签内加了一个 width='100%的设置,设置弹层最大宽度maxWidth:800,这样能够将图片按原比例缩小(但是该方法还有缺陷,只做了宽度的限制,如果图片高度过大的话,在页面中会显示不全造成遮挡)
- 设置图片最大宽度的格式是maxWidth:800,一开始按area的写法:maxWidth: ‘290px’,发现怎么都无效,文档还是要看仔细
- 只有当area: 'auto’时,maxWidth的设定才有效
layer 点击图片缩略图弹出图片原图相关推荐
- layer 上传图片点击取消仍在加载_layer 点击弹出图片
今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo success:function (e) { var url = e.qrcode_url; //a ...
- layer弹出图片的问题
layer下载地址:http://layer.layui.com/ jQuery下载地址:http://www.jq22.com/jquery-info122 使用layer弹框的步骤: 1.引入ja ...
- JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块,点击弹出图片,并左右滚动幻灯片...
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
- 案例:文件下载需求:1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...
- html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
- [QT]实现点击按钮弹出图片的效果
点击按钮弹出图片的实现 void MainWindow::btnTest() {QLabel* labelImage = new QLabel(this, Qt::Dialog |Qt::Window ...
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- 微信长按图片无法弹出识别二维码选项解决方案
1.首先页面中有两个二维码的兄弟别忙活了,一个页面中只可以识别其中一个二维码,两个的话需提示用户双击放大二维码进行二维码识别. 2.网页内有一张图片进行二维码识别时长按没有反应(长按图片无法弹出识别二 ...
最新文章
- index.php user r,安装cms :在浏览器中打开http://你的网址/install/index.php 出现白屏怎样处理?...
- sublime text3 插件安装方法
- [leetcode] 数字游戏
- 洛谷P2507 [SCOI2008]配对 题解(dp+贪心)
- 学习笔记84—[深度学习]神经网络反向传播(BackPropagation)
- 手写select,解决浏览器兼容性
- 【网络安全】NFS服务安全加固
- Apache Flink 读取本地文件,处理数据,导入ES
- Tomcat 上添加虚拟相对路径
- duilib设置滚动条自动滚动到底
- O(logn)复杂度恐怖之处
- 活动丨4场直播华丽丽来袭,快来参与
- bzoj1783: [Usaco2010 Jan]Taking Turns
- xposed 修改手机定位
- 计算机cpu电压,怎么样调电脑cpu电压啊
- 2021-2027中国高效空气过滤器市场现状及未来发展趋势
- 深入分析 synchronized 的实现原理
- 解释部署大数据解决方案应遵循的步骤
- 68dva的相关知识
- 分享Silverlight/Windows8/WPF/WP7/HTML5周学习导读(5月27日-6月3日)
热门文章
- 于丹教授50句关于人性的总结
- CorelDRAW软件安装常见问题
- python爬取酷狗音乐免费歌曲
- python openpyxl包excel 绘制 线性图表
- html判断对象是否为空,javascript怎么判断对象是否为空对象?
- 手机摄影入门(一) 放下“无单反不摄影”的观念
- windows无法启动MySQL服务出现1053错误解决方法
- 美妆品牌与消费者需求更迭之后,零售商们如何不掉队?
- 安卓 页面跳转_曲奇影视:支持安卓+苹果,新出来的双端手机看片神器。
- mysql_native_password