H5页面点击图片自动全屏代码

<script type="text/javascript">
		$(function() {
			$(".photo li img").click(function() {
				var _this = $(this);//将当前的pimg元素作为_this传入函数
				imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
			});
		});

		function imgShow(outerdiv, innerdiv, bigimg, _this) {
			var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
			$(bigimg).attr("src", src);//设置#bigimg元素的src属性

			/!*获取当前点击图片的真实大小，并显示弹出层及大图*!/
			$("<img/>").attr("src", src).load(function() {
				var windowW = $(window).width();//获取当前窗口宽度
				var windowH = $(window).height();//获取当前窗口高度
				var realWidth = this.width;//获取图片真实宽度
				var realHeight = this.height;//获取图片真实高度
				var imgWidth, imgHeight;
				var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

				if (realHeight > windowH * scale) {
					imgHeight = windowH * scale;
					imgWidth = imgHeight /realHeight*realWidth;
					if (imgWidth > windowW * scale) {
						imgWidth = windowW * scale;
					}
				} else if (realWidth > windowW * scale) {
					imgWidth = windowW * scale;
					imgHeight = imgWidth/realWidth*realHeight;
				} else {
					imgWidth = realWidth;
					imgHeight = realHeight;
				}
				$(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放

				var w = (windowW - imgWidth)/2;// 计算图片与窗口左边距
				var h = (windowH - imgHeight)/2;// 计算图片与窗口上边距
				$(innerdiv).css({
					"top" : h,
					"left" : w
				});//设置#innerdiv的top和left属性
				$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
			});

			$(outerdiv).click(function() {
				$(this).fadeOut("fast");
			});
		}
	</script>

js代码如上

<div id="outerdiv"
     style="position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 2; width: 100%; height: 100%; display: none;">
    <div id="innerdiv" style="position: absolute;">
        <img id="bigimg" style="border: 5px solid #fff;" src=""/>
    </div>
</div>

弹窗层html代码