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 相关文章推荐
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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打开文件fopen函数的使用说明
2013/07/05 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
PyQt5响应回车事件的方法
2019/06/25 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
经济管理专业自荐信
2013/12/30 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Win11快速关闭所有广告推荐
2022/04/19 数码科技