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 ui插件的使用方法代码实例
May 08 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
node.js实现爬虫教程
Aug 25 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
vue实现购物车加减
May 30 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在文件指定行中写入代码的方法
2012/05/23 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
python的else子句使用指南
2016/02/27 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python简易版图书管理系统
2019/08/12 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Django-migrate报错问题解决方案
2020/04/21 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
二手书店创业计划书
2014/01/16 职场文书
少年闰土教学反思
2014/02/22 职场文书
实习指导老师意见
2015/06/04 职场文书
公司欠款证明
2015/06/24 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers