1 /* 2  *鍥剧墖澶у浘鏄剧ず 3  */ 4 function imgshow(){ 5     content_div:"";//内容 6     bg_div:"";//背景变暗 7     img_div:"";//图片 8     prev_div:"";//上一页 9     next_div:"";//下一页10 11 12     $(content_div).find("img").click(function(){13     var img = new Image(); 14     img.src =http://www.mamicode.com/$(this).attr("src") ;15     num=$(content_div).find("img").length;16     imgcount=$(content_div).find("img").index($(this)); 17     var src=http://www.mamicode.com/$(content_div).find("img").eq(imgcount).attr("src");18     var imgWidth=img.width;19     var imgHeiht=img.height;20     wh=document.documentElement.clientHeight;21     ww=document.documentElement.clientWidth;22     marginH=(wh-imgHeiht)/2;23     marginW=(ww-imgWidth)/2;24     $(img_div).css({"top":marginH,"left":marginW});25     //alert(www);26     $(bg_div).css({"width":ww,"height":wh});27     $(bg_div).css({"display":"block"});28     $(img_div).html("<img src=http://www.mamicode.com/‘"+src+"‘>");29     $(prev_div).html("<h1><</h1>");30     $(next_div).html("<h1>></h1>");31     $(prev_div).css({"top":wh/2,"left":"50px"});32     $(next_div).css({"top":wh/2,"right":"50px"});33     //$(".big-img:after").css({"top":-h});34     $(img_div).show("slow");35     $(img_div).find("img").css({"max-height":wh,"max-width":ww});36     37 38   })39   $(prev_div).click(function(){40 41     if(imgcount!=0){42     var src=http://www.mamicode.com/$("#content-detailed img").eq(imgcount-1).attr("src");43     44     $(img_div).html("<img src=http://www.mamicode.com/‘"+src+"‘>");45     var imgWidth=$(img_div).find("img").width();46     var imgHeiht=$(img_div).find("img").height();47     //alert(imgWidth);48     wh=document.documentElement.clientHeight;49     ww=document.documentElement.clientWidth;50     marginH=(wh-imgHeiht)/2;51     marginW=(ww-imgWidth)/2;52     $(img_div).css({"top":marginH,"left":marginW});53     $(img_div).find("img").css({"max-height":wh,"max-width":ww});54     $(img_div).hide();55     $(img_div).show("slow");56     imgcount--;57     }58   })59   $(next_div).click(function(){60     if(imgcount<num-1){61     62     var src=http://www.mamicode.com/$("#content-detailed img").eq(imgcount+1).attr("src");63     $(img_div).html("<img src=http://www.mamicode.com/‘"+src+"‘>");64     var imgWidth=$(img_div).find("img").width();65     var imgHeiht=$(img_div).find("img").height();66     //alert(imgWidth);67     wh=document.documentElement.clientHeight;68     ww=document.documentElement.clientWidth;69     marginH=(wh-imgHeiht)/2;70     marginW=(ww-imgWidth)/2;71     $(img_div).css({"top":marginH,"left":marginW});72     $(img_div).find("img").css({"max-height":wh,"max-width":ww});73     $(img_div).hide();74     $(img_div).show("slow");75     imgcount++;76     }77   })78   $(bg_div).click(function(){79   80       81       $(img_div).hide("slow");82       $(prev_div).html("");83       $(next_div).html("");84       $(img_div).html("");85       $(bg_div).css({"display":"none"});86 87 88     89   })90 91   }

 1 div.big-img{position: fixed;z-index: 50; display: none;border-radius: 5px;} 2 div.big-img img{border-radius: 5px;} 3 div.prev{position: fixed;z-index: 51;color: #fff;cursor: pointer;text-shadow: 0 0 10px #666;} 4 div.next{position: fixed;z-index: 51;color: #fff;cursor: pointer;text-shadow: 0 0 10px #666;} 5  6 #bgDiv { 7     z-index: 40; 8     display: block; 9     position: fixed;10     top: 0px;11     left: 0px;12     right:0px;13     background-color: #000;14     filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);15     opacity: 0.6;16 }