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 }
css：
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 }
5 content_div:"";//内容
6 bg_div:"";//背景变暗
7 img_div:"";//图片
8 prev_div:"";//上一页
9 next_div:"";//下一页
只需引用js，设置上面的div的id或者class