html:点击图片放大到全屏，再次点击缩回

做手机网页开发时，经常遇到的效果：点击某个不加链接的图片时，图片放大，当再次点击放大的图片时，图片缩回（实质上将层隐藏掉了）。

实现思路：

准备原材料：一个遮档整个屏幕的不透明接近黑色的背景层（

），一个位于背景层之上的图片容器(

) ；

加工过程：当点击不加链接的图片时，将黑色背景层显示，再通过计算原始图片尺寸与手机屏幕尺寸，使图片以恰当的比例显示在图片容器中，将图片容器显示；

        当再次点击放大的图片时，将黑色背景层和图片容器隐藏。

贴出代码：

HTML:

CSS:

.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}

jQuery:

 var imgsObj = $('.amplifyImg img');//需要放大的图像
    if(imgsObj){
		$.each(imgsObj,function(){
			$(this).click(function(){
				var currImg = $(this);
				coverLayer(1);
				var tempContainer = $('
');//图片容器
				with(tempContainer){//width方法等同于$(this)
					appendTo("body");
					var windowWidth=$(window).width();
					var windowHeight=$(window).height();
					//获取图片原始宽度、高度
					var orignImg = new Image();
					orignImg.src =currImg.attr("src") ;
					var currImgWidth= orignImg.width;
					var currImgHeight = orignImg.height;
					if(currImgWidth35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
								topHeight=topHeight-35;
								css('top',topHeight);
							}else{
								css('top',0);
							}
							html('');
						}else{
							css('top',0);
							html('');
						}
					}else{
						var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
						if(currImgChangeHeight35){
								topHeight=topHeight-35;
								css('top',topHeight);
							}else{
								css('top',0);
							}
							html('');
						}else{
							css('top',0);
							html('');
						}
					}
				}
				tempContainer.click(function(){
					$(this).remove();
					coverLayer(0);
					});
			});
		});
    }
    else{
    	return false;
    }
    //使用禁用蒙层效果
    function coverLayer(tag){
		with($('.over')){
			if(tag==1){
				css('height',$(document).height());
				css('display','block');
				css('opacity',1);
				css("background-color","#191919");
			}
			else{
				css('display','none');
			}
		}
    }