<html> <head> <style> .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;} </style> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> </head> <body> <div class="over"></div><!--背景層--> <div class="logoImg amplifyImg"><!--注意：此處的amlifyImg不可少--> <img src="test.jpg"/><!-- 此處是引入圖片的路徑 --> </div> <script> $(document).ready(function () { var imgsObj = $('.amplifyImg img');//需要放大的圖像 if(imgsObj){ $.each(imgsObj,function(){ $(this).click(function(){ var currImg = $(this); coverLayer(1); var tempContainer = $('<div class=tempContainer></div>');//圖片容器 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(currImgWidth<windowWidth){//為了讓圖片不失真，當圖片寬度較小的時候，保留原圖 if(currImgHeight<windowHeight){ var topHeight=(windowHeight-currImgHeight)/2; if(topHeight>35){/*此處為了使圖片高度上居中顯示在整個手機屏幕中：因為在android,ios的微信中會有一個title導航，35為title導航的高度*/ topHeight=topHeight-35; css('top',topHeight); }else{ css('top',0); } html('<img border=0 src=' + currImg.attr('src') + '>'); }else{ css('top',0); html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>'); } }else{ var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth; if(currImgChangeHeight<windowHeight){ var topHeight=(windowHeight-currImgChangeHeight)/2; if(topHeight>35){ topHeight=topHeight-35; css('top',topHeight); }else{ css('top',0); } html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>'); }else{ css('top',0); html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>'); } } } 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","#FFFFFF"); css("background-color","rgba(0,0,0,0.7)" ); //蒙層透明度 } else{ css('display','none'); } } } }); </script> </body> </html>