有关图片放大全屏的效果_amazeui 图片放大使用-CSDN博客

本文链接：https://blog.csdn.net/hearain528/article/details/49802171

<html>
<title>测试全屏</title>
<meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="jquery.min.js"></script>
<!--这里使用第三方的jquery插件amazeui.js,感觉挺好的,挺实用的，具体使用教程详见官网：http://amazeui.org/-- -->
<script type="text/javascript" src="amazeui.js"></script>
<link rel="stylesheet" href="amazeui.min.css">
<body>
<div id="full">
	<img id="pic" src="1.jpg" width="375px" height="200px" />
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
	<img id="pic2" src="1.jpg"   width="375px" height="200px"/>
</div>
<script language="JavaScript">
var clientWidth = $(window).width();	//获取		
var clientHeight = $(window).height();
$(document).ready(function(){
	
});
$('#pic').on('click', function () {
		$('#pic2').css("transform","rotate(90deg)");
		$('#pic2').css("width",clientHeight);
		$('#pic2').css("height",clientWidth);
		$('#my-alert').modal({
			relatedTarget: this,
			width:clientHeight,
			height:clientWidth
		});
});
$('#pic2').on('click', function () {
	$('#my-alert').modal('close');
});
</script>
</body>
</html>