话不多说，直接上代码
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！