今天用layui写了一个表格里面涉及图片显示的问题,我想实现通过点击图片弹出一个弹出层,使图片自适应放大。下面是代码:
表格里面:
{
field: 'imgUrl',
title: '展示图片',
templet: '<div><img src="{{ d.imgUrl }}" alt="" style="width:80px; height:80px;" onclick="showBigImage(this)""></div>'
},
js点击事件:
<script type="text/javascript">
//显示大图片
function showBigImage(e) {
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true, //点击阴影关闭
area: [$(e).width + 'px', $(e).height + 'px'], //宽高
content: "<img src=" + $(e).attr('src') + " />"
});
}
</script>
这样就能实现点击图片自适应放大的效果。
例图:
点击后:
是根据图片大小自适应展示的。