|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<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="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> |