转：js弹出层浏览(放大)图片

转载自悠悠左 [ http://www.uuzuo.com/ ]
查看实例请点击这里:[url]http://www.uuzuo.com/demo/r/[/url]

说明：
1.必须有id,必须有rel。
2.再次点击弹出的图片，此图片会消失。


var showimg = {
bgopacity:0.8,
thisimg:'',
imgsrc:'',
loadimgsrc:'images/loading.gif',
loadimgages:new Array(),
show:function(imgid){
var obj = document.getElementById(imgid);
showimg.imgsrc = obj.getAttribute('rel');
if(showimg.imgsrc=='')return;
var scrollTop,winHeight;
var bgdiv=document.createElement("div");
bgdiv.id = 'showimagesbg';
bgdiv.style.position="absolute";
bgdiv.style.top=0;
bgdiv.style.left=0;
bgdiv.style.zIndex=50;
if (window.innerHeight){
winHeight = window.innerHeight;
}else if((document.body)&&(document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
if (document.documentElement && document.documentElement.clientHeight){
winHeight = document.documentElement.clientHeight;}
if(winHeight < document.body.clientHeight)winHeight=document.body.scrollHeight;
bgdiv.style.height = winHeight + "px";
bgdiv.style.filter="alpha(opacity="+(showimg.bgopacity*100)+")";
bgdiv.style.opacity=showimg.bgopacity;
bgdiv.style.MozOpacity=showimg.bgopacity;
bgdiv.style.backgroundColor="#000";
bgdiv.style.width=document.documentElement.clientWidth+"px";
document.body.appendChild(bgdiv);
if(document.documentElement&&document.documentElement.scrollTop){
scrollTop=document.documentElement.scrollTop;
}else if(document.body){scrollTop=document.body.scrollTop;}
var boxdiv = document.createElement('div');
boxdiv.id = 'showimagesbox';
boxdiv.style.position="absolute";
boxdiv.style.top=scrollTop+10+"px"
boxdiv.style.width=150+"px"
boxdiv.style.zIndex=51;
boxdiv.style.backgroundColor="#fff";
boxdiv.style.padding='5px';
boxdiv.style.left=(document.body.scrollWidth-150)/2+"px";
boxdiv.style.textAlign = 'center';
document.body.appendChild(boxdiv);
var simg = document.createElement('img');
simg.id = 'showimagesimg';
simg.style.cursor = 'pointer';
simg.style.margin = '0px';
simg.src = showimg.loadimgsrc;
simg.οnclick=function(){showimg.close();};
boxdiv.appendChild(simg);
/*
var closea = document.createElement('a');
closea.innerHTML == '关闭';
closea.href = 'javascript:showimg.close();';
boxdiv.appendChild(closea);
*/
showimg.thisimg = imgid;
var isload = 0;
for(var s = 0;s<showimg.loadimgages.length;s++){
if(showimg.loadimgages[s]==showimg.imgsrc){
isload=1;
}
}
if(isload){
simg.src = showimg.imgsrc;
boxdiv.style.left=(document.body.scrollWidth-simg.offsetWidth)/2+"px";
boxdiv.style.width = simg.width+'px';
}else{
showimg.getimg();
showimg.loadimgages[showimg.loadimgages.length] = showimg.imgsrc;
}
},
close:function(){
var bgdiv = document.getElementById('showimagesbg');
var boxdiv = document.getElementById('showimagesbox');
var simg = document.getElementById('showimagesimg');
boxdiv.removeChild(simg);
document.body.removeChild(bgdiv);
document.body.removeChild(boxdiv);
},
imgonload:function(myimg){
document.getElementById('showimagesbox').style.left=(document.body.scrollWidth-myimg.width-10)/2+"px";
document.getElementById('showimagesimg').src = showimg.imgsrc;
document.getElementById('showimagesbox').style.width = myimg.width+'px';
},
getimg:function(){
var myimg=new Image();
myimg.onload = function(){
showimg.imgonload(myimg);
};
myimg.src=showimg.imgsrc;
}
};