jq图片点击居中放大原始图片兼容ie

 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 =$(this).attr("src") ;
15     num=$(content_div).find("img").length;
16     imgcount=$(content_div).find("img").index($(this)); 
17     var src=$(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=‘"+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=$("#content-detailed img").eq(imgcount-1).attr("src");
43     
44     $(img_div).html("<img src=‘"+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=$("#content-detailed img").eq(imgcount+1).attr("src");
63     $(img_div).html("<img src=‘"+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 }