layui点击图片实现预览功能,要怎么实现呢?
HTML内使用代码:
<img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" onclick="previewImg(this)">
JS代码部分:
function previewImg(obj) {
var img = new Image();
img.src = obj.src;
var height=img.height,width=img.width;
if(img.height > 600) {
height = '600px';
width=(600/(img.height))*(img.width);
}
var imgHtml = "<img src='" + obj.src + "' height='"+height+"' width='"+width+"' />";
//弹出层
layer.open({
type: 1,
offset: 'auto',
area: [width,'auto'],
shadeClose:true,//点击外围关闭弹窗
scrollbar: false,//不现实滚动条
title: "图片预览", //不显示标题
content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
cancel: function () {
}
});
}