html点击图片可以放全屏,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');

}

}

}