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 相关文章推荐
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
Python Grid使用和布局详解
2018/06/30 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python中的decimal类型转换实例详解
2019/06/26 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
python实现图像拼接
2020/03/05 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
学校校庆演讲稿
2014/05/22 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
运动会通讯稿600字
2015/07/20 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python