有关图片放大全屏的效果

来源：互联网发布：父亲丢弃新生女儿知乎编辑：程序博客网时间：2024/06/09 18:47

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

0 0