<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
</style>
</head>
<body>
<button class="btn1">默认显示</button>
<button class="btn2">显示竖屏大图</button>
<button class="btn3">显示横屏大图</button>
<script src="jquery-3.1.1.min.js"></script>
<script src="layui.all.js"></script>
<script>
$("body").on("click",".btn1",function(){
fun('5.png')
})
$("body").on("click",".btn2",function(){
fun('3.png')
})
$("body").on("click",".btn3",function(){
fun('6.png')
})
function fun(data) {
var img = new Image();
img.src = data;
img.onload = function(){
var areaW = img.width;
var areaH = img.height;
var areachoose=[areaW+'px',areaH+'px'];
var shtml = '<img style="vertical-align: middle;" src="'+data+'">';
if(areaW > window.screen.availWidth-100 ){
areaW = window.screen.availWidth-120+'px';
areachoose=[areaW,'auto'];
shtml='<img style="vertical-align: middle;width:100%" src="'+data+'">';
}
if(areaH > window.screen.availHeight-100 ){
areaH = window.screen.availHeight-120+'px';
areachoose=['auto',areaH];
shtml='<img style="vertical-align: middle;height:100%" src="'+data+'">';
}
layer.ready(function() {
parent.layer.open({
type: 1,
title:false,
closeBtn: 1, //不显示关闭按钮
anim: 2,
area: areachoose,
shadeClose: true, //开启遮罩关闭
content:shtml
});
})
}
}
</script>
</body>
</html>