<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>
有关图片放大全屏的效果
最新推荐文章于 2021-12-13 16:55:51 发布