ＪＳ实现：点击后，图片弹出放大，背景变黑的效果
相关代码如下，其中，取得弹出大图的url，也可以写成(".jpg",".jpg"),实例化中，mode_right是所要获取的ID
显示代码
1 <script type="text/javascript">
2 function ImgShow(evt){
3 var imgTag=(window.event)?event.srcElement:evt.target;
4 var imgPath=imgTag.src.replace("abc.jpg",".jpg");//取得弹出的大图url
5 var tagTop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
6 var tag=document.createElement("div");
7 tag.style.cssText="width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight)+"px;position:absolute;background:white;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
8 var tagImg=document.createElement("div");
9 tagImg.style.cssText="font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid gray;background:gray;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tagTop)+"px;"
10
11 var closeTag=document.createElement("div");
12 closeTag.style.cssText="position:absolute;right:10px;bottom:10px;background:red;border:1px solid white;yellow:white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;";
13 closeTag.innerHTML="<img src='images/closelabel.gif'>";
14 closeTag.onclick=closes;
15 document.body.appendChild(tag);
16 document.body.appendChild(tagImg);
17 var img=new Image();
18 img.src=imgPath;
19 img.style.cssText="border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;";
20 var barShow,imgTime;
21 img.complete?ImgOK():img.onload=ImgOK;
22 function ImgOK(){
23 var Stop1=false,Stop2=false,temp=0;
24 var tx=tagImg.offsetWidth,ty=tagImg.offsetHeight;
25 var ix=img.width,iy=img.height;
26 var sx=document.documentElement.clientWidth,sy=Math.min(document.documentElement.clientHeight,document.body.clientHeight/*opera*/);
27 var xx=ix>sx?sx-50:ix+4,yy=iy>sy?sy-50:iy+3;
28 var maxTime=setInterval(function(){
29 temp+=35;
30 if((tx+temp)<xx){
31 tagImg.style.width=(tx+temp)+"px";
32 tagImg.style.left=(sx-(tx+temp))/2+"px";
33 }else{
34 Stop1=true;
35 tagImg.style.width=xx+"px";
36 tagImg.style.left=(sx-xx)/2+"px";
37 }
38 if((ty+temp)<yy){
39 tagImg.style.height=(ty+temp)+"px";
40 tagImg.style.top=(tagTop+((sy-(ty+temp))/2))+"px";
41 }else{
42 Stop2=true;
43 tagImg.style.height=yy+"px";
44 tagImg.style.top=(tagTop+((sy-yy)/2))+"px";
45 }
46 if(Stop1&&Stop2){
47 clearInterval(maxTime);
48 tagImg.appendChild(img);
49 temp=0;
50 imgOPacity();
51 }
52 },1);
53 function imgOPacity(){
54 temp+=10;
55 img.style.filter="alpha(opacity="+temp+")";
56 img.style.opacity=temp/100;
57 imgTime=setTimeout(imgOPacity,1)
58 if(temp>100) clearTimeout(imgTime);
59 }
60 tagImg.innerHTML="";
61 tagImg.appendChild(closeTag);
62 if(ix>xx||iy>yy){
63 img.alt="左键拖动,双击放大缩小";
64 img.ondblclick=function (){
65 if(tagImg.offsetWidth<img.offsetWidth||tagImg.offsetHeight<img.offsetHeight){
66 img.style.width="auto";
67 img.style.height="100%";
68 img.alt="双击可以放大";
69 img.onmousedown=null;
70 closeTag.style.top="10px";
71 closeTag.style.left="10px";
72 tagImg.style.overflow="visible";
73 tagImg.style.width=img.offsetWidth+"px";
74 tagImg.style.left=((sx-img.offsetWidth)/2)+"px";
75 }else{
76 img.style.width=ix+"px";
77 img.style.height=iy+"px";
78 img.alt="双击可以缩小";
79 img.onmousedown=dragDown;
80 tagImg.style.overflow="auto";
81 tagImg.style.width=xx+"px";
82 tagImg.style.left=((sx-xx)/2)+"px";
83 }
84 }
85 img.onmousedown=dragDown;
86 tagImg.onmousemove=barHidden;
87 tagImg.onmouseout=moveStop;
88 document.onmouseup=moveStop;
89 }else{
90 tagImg.style.overflow="visible";
91 tagImg.onmousemove=barHidden;
92 }
93 }
94 function dragDown(a){
95 img.style.cursor="pointer";
96 var evts=a||window.event;
97 var onx=evts.clientX,ony=evts.clientY;
98 var sox=tagImg.scrollLeft,soy=tagImg.scrollTop;
99 var sow=img.width+2-tagImg.clientWidth,soh=img.height+2-tagImg.clientHeight;
100 var xxleft,yytop;
101 document.onmousemove=function(e){
102 var evt=e||window.event;
103 xxleft=sox-(evt.clientX-onx)<0?"0":sox-(evt.clientX-onx)>sow?sow:sox-(evt.clientX-onx);
104 yytop=soy-(evt.clientY-ony)<0?"0":soy-(evt.clientY-ony)>soh?soh:soy-(evt.clientY-ony);
105 tagImg.scrollTop=yytop;
106 tagImg.scrollLeft=xxleft;
107 closeTag.style.top=(yytop+10)+"px";
108 closeTag.style.left=(xxleft+10)+"px";
109 return false;
110 }
111 return false;
112 }
113 function barHidden(){
114 //clearTimeout(barShow);
115 //if(closeTag.style.display=="none")closeTag.style.display="block";
116 //barShow=setTimeout(function(){closeTag.style.display="none";},2000);
117 }
118 function closes(){
119 document.body.removeChild(tag);
120 document.body.removeChild(tagImg);
121 clearTimeout(barShow);
122 clearTimeout(imgTime);
123 document.onmouseup=null;
124 tag=img=tagImg=closeTag=null;
125 }
126 function moveStop(){
127 document.onmousemove=null;
128 tagImg.onmousemove=barHidden;
129 img.style.cursor="default";
130 }
131 }
132 </script>
133
134 <script type="text/javascript">//实例化
135 var imgList1=document.getElementById("mode_right").getElementsByTagName("img");
136
137 for(var i in imgList1){
138 imgList1[i].onclick=ImgShow;
139 }
140 </script>
