layer.open弹层查看缩略图的原图,自适应大小的实例


Posted in Javascript onSeptember 05, 2019

很多时候需要查看缩略图的原图,那么layer.open是一个不错的选择

直接上代码

//查看原图
 function showImg(url){
 //alert(url);
 var img_infor = "<img src='" + url + "' />";
 layer.open({  
     type: 1, 
     closeBtn: 1,
     shade: false,  
     title: false, //不显示标题
     //skin: 'layui-layer-nobg', //没有背景色
     shadeClose: false,
     area:['auto','auto'],  
     //area: [img.width + 'px', img.height+'px'],  
     content: img_infor //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
     //cancel: function () {  
       //layer.msg('图片查看结束!', { time: 5000, icon: 6 });  
     //}  
   });  

 }

前提是要知道img的src

好了,ok!

以上这篇layer.open弹层查看缩略图的原图,自适应大小的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
vue2单元测试环境搭建
May 24 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 #Javascript
layer.js open 隐藏滚动条的例子
Sep 05 #Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 #Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 #Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 #Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 #Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php类中private属性继承问题分析
2012/11/01 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
javascript 动态添加表格行
2006/06/22 Javascript
用js计算页面执行时间的函数
2006/12/07 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python查看微信撤回消息代码
2018/06/07 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python super()函数使用及多重继承
2020/05/06 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
好矿嫂事迹材料
2014/01/21 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
六查六看六改心得体会
2014/10/14 职场文书