layui点击图片预览
程序员文章站
2022-05-13 23:51:05
...
预览图片显示原始大小
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 + "' />";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [width + 'px',height+'px'],
shadeClose:true,//点击外围关闭弹窗
scrollbar: false,//不现实滚动条
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
固定预览图片大小 500 * 500
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
//弹出层
layer.open({
type: 1,
shade: 0.8,
offset: 'auto',
area: [500 + 'px',550+'px'],
shadeClose:true,
scrollbar: false,
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
//layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
}
});
}
HTML内使用
<img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)">
上一篇: HashSet
下一篇: Java HashSet