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 09 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
DC动漫人物排行
2020/03/03 欧美动漫
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP安全防范技巧分享
2011/11/03 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
jquery中为什么能用$操作
2019/06/18 jQuery
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
python 切片和range()用法说明
2013/03/24 Python
python提示No module named images的解决方法
2014/09/29 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
护士医德医风自我评价
2014/09/15 职场文书
幼师小班个人总结
2015/02/12 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python