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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
微前端qiankun改造日渐庞大的项目教程
Jun 21 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中is_dir()函数使用指南
2015/05/08 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
用Webpack构建Vue项目的实践
2017/11/07 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python安装twisted的问题解析
2018/08/21 Python
python requests.post带head和body的实例
2019/01/02 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Python如何操作docker redis过程解析
2020/08/10 Python
政法大学毕业生自荐信范文
2014/01/01 职场文书
开业庆典答谢词
2014/01/18 职场文书
医学生自我评价
2014/01/27 职场文书
销售助理岗位职责
2014/02/21 职场文书
公司活动总结怎么写
2014/06/25 职场文书
先进个人总结范文
2015/02/15 职场文书
应届生简历自我评价
2015/03/11 职场文书
班级班风口号大全
2015/12/25 职场文书