Layui点击图片弹框预览的实现方法
更新时间：2019年09月16日 09:41:45 作者：amenghui
今天小编就为大家分享一篇Layui点击图片弹框预览的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
我就废话不多说了，直接上代码吧！
如下所示：
<img src="123.png" width="20px" height="20px" class="layui-upload-img" onclick="previewImg(this)">
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
//var height = img.height + 50; // 原图片大小
//var width = img.width; //原图片大小
var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [500 + 'px',550+'px'], // area: [width + 'px',height+'px'] //原图显示
shadeClose:true,
scrollbar: false,
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
//另外打开一个页面显示图片
function previewImg(obj) {
window.open(obj.src);
}
以上这篇Layui点击图片弹框预览的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript实现列出数组中最长的连续数的方法及使用,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了JS实现纵向轮播图的初级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下2017-11-11
组合模式大概是设计模式里面使用最为广泛的模式之一了，模式本身理解起来也比较简单，以至于可以毫不费力的写出一个能用的组合模式伪代码2016-08-08
这篇文章主要介绍了微信小程序uploadFile接口实现文件上传流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了JS的数组方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了JS/jQ实现免费获取手机验证码倒计时效果的相关资料,通过定义两个接口，发送验证请求和返回数据验证手机号和验证是否一致，后台根据接口去实现，需要的朋友可以参考下2016-06-06
今天小编就为大家分享一篇使用layer.msg 时间设置不起作用的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了javascript随机抽取0-100之间不重复的10个数，分享了两种简单办法，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要介绍了javaScript产生随机数的用法小结,包括JavaScript Math.random()内置函数 ，Js 随机数产生6位数字的代码，需要的朋友可以参考下2018-04-04
最新评论