話不多說，直接上代碼
1 <html> 2 <head> 3 <style> 4 .over {position: fixed; left:0; top:0; width:100%; z-index:100;} 5 .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;} 6 </style> 7 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 8 </head> 9 <body> 10 <div class="over"></div><!--背景層--> 11 <div class="logoImg amplifyImg"><!--注意：此處的amlifyImg不可少--> 12 <img src="test.jpg"/><!-- 此處是引入圖片的路徑 --> 13 </div> 14 <script> 15 $(document).ready(function () { 16 var imgsObj = $('.amplifyImg img');//需要放大的圖像 17 if(imgsObj){ 18 $.each(imgsObj,function(){ 19 $(this).click(function(){ 20 var currImg = $(this); 21 coverLayer(1); 22 var tempContainer = $('<div class=tempContainer></div>');//圖片容器 23 with(tempContainer){//width方法等同於$(this) 24 appendTo("body"); 25 var windowWidth=$(window).width(); 26 var windowHeight=$(window).height(); 27 //獲取圖片原始寬度、高度 28 var orignImg = new Image(); 29 orignImg.src =currImg.attr("src") ; 30 var currImgWidth= orignImg.width; 31 var currImgHeight = orignImg.height; 32 if(currImgWidth<windowWidth){//為了讓圖片不失真，當圖片寬度較小的時候，保留原圖 33 if(currImgHeight<windowHeight){ 34 var topHeight=(windowHeight-currImgHeight)/2; 35 if(topHeight>35){/*此處為了使圖片高度上居中顯示在整個手機屏幕中：因為在android,ios的微信中會有一個title導航，35為title導航的高度*/ 36 topHeight=topHeight-35; 37 css('top',topHeight); 38 }else{ 39 css('top',0); 40 } 41 html('<img border=0 src=' + currImg.attr('src') + '>'); 42 }else{ 43 css('top',0); 44 html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>'); 45 } 46 }else{ 47 var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth; 48 if(currImgChangeHeight<windowHeight){ 49 var topHeight=(windowHeight-currImgChangeHeight)/2; 50 if(topHeight>35){ 51 topHeight=topHeight-35; 52 css('top',topHeight); 53 }else{ 54 css('top',0); 55 } 56 html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>'); 57 }else{ 58 css('top',0); 59 html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>'); 60 } 61 } 62 } 63 tempContainer.click(function(){ 64 $(this).remove(); 65 coverLayer(0); 66 }); 67 }); 68 }); 69 } 70 else{ 71 return false; 72 } 73 //使用禁用蒙層效果 74 function coverLayer(tag){ 75 with($('.over')){ 76 if(tag==1){ 77 css('height',$(document).height()); 78 css('display','block'); 79 css('opacity',1); 80 css("background-color","#FFFFFF"); 81 css("background-color","rgba(0,0,0,0.7)" ); //蒙層透明度 82 } 83 else{ 84 css('display','none'); 85 } 86 } 87 } 88 }); 89 </script> 90 </body> 91 </html>
over！over！over！