layer弹出图片，超出屏幕分辩率后缩小尺寸显示

最新推荐文章于 2022-04-09 09:52:20 发布

dongsdh

最新推荐文章于 2022-04-09 09:52:20 发布

阅读量551

点赞数

分类专栏：有示例图片的小列子

本文链接：https://blog.csdn.net/dongsdh/article/details/104957382

版权

有示例图片的小列子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
layer弹出图片，超出屏幕分辩率后缩小尺寸显示

<!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-...
复制链接

扫一扫