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点击图片弹框预览的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信公众号生成新浪短网址的实现(快速生成)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了javascript的基本包装类型，JS为了便于操作基本类型,提供了3个特殊的引用类型:Boolean/Number和String,需要的朋友可以参考下2015-04-04
返回字符串的字节长度 检查表单是否符合规定的长度 等表达验证函数2009-04-04
本篇文章主要介绍了bootstrap-table组合表头的实现方法，非常具有实用价值，需要的朋友可以参考下2017-09-09
我们很容易被漂亮的代码吸引，也不知不觉的在自己的代码库中加入这些。却没有冷静的想过它们的优劣。这不，我就收集了一系列形如 是否为……？ 的判断的boolean函数2012-08-08
一个级联菜单代码学习及removeClass与addClass的应用
最近在学些web前段的知识，看见博客园首页左侧的一个级联菜单,很是好奇，于是想自己实现以下，代码书写很简洁而且易懂，感兴趣的朋友可以了解下，希望本文对你学习级联菜单有所帮助2013-01-01
Javascript计算两个marker之间的距离(Google Map V3)
做地图开发，最常用到的就是marker一些操作和交互。简单介绍一下，两个marker之间的距离计算，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
这篇文章主要介绍了JS中图片base64转file文件的两种方式,实现把图片的base64编码转成file文件的功能，然后再上传至服务器，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件，对bootstrap icon图标相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了JavaScript中匿名函数用法,实例分析了javascript中匿名函数的功能、定义及具体用法,需要的朋友可以参考下2015-03-03
最新评论