点击图片，弹出一个层，显示图片

-

<script type="text/javascript">
var Browser=new Object();
 Browser.userAgent=window.navigator.userAgent.toLowerCase();
 Browser.ie=/msie/.test(Browser.userAgent);
 Browser.Moz=/gecko/.test(Browser.userAgent);
var PhotoShow={
 url:"",
 title:"",
 alt:"",
 objWidth:(window.innerWidth)?window.innerWidth:(document.documentElement&&document.documentElement.clientWidth)?document.documentElement.clientWidth:document.documentElement.offsetWidth,//获取窗体的可视区域的宽;
 objHeight:(window.innerHeight)?window.innerHeight:(document.documentElement&&document.documentElement.clientHeight)?document.documentElement.clientHeight:document.documentElement.offsetHeight,//也可以加上document.documentElement.scrollHeight
 init:function(){ //初始化，创建一个层宽度和高度为可视区域宽高
  var creatediv=document.createElement("div");
      creatediv.id="divscreen";
  with(creatediv.style){
      width=this.objWidth+"px";
      height=this.objHeight+"px";
      backgroundColor="#000";
      position="absolute";
      left="0px";
      top="0px";
      zIndex=80;
      filter="alpha(opacity=20)";
      opacity=0.2;
  }
  document.body.insertBefore(creatediv,document.body.childNodes[0]);
 }, 
 PhotoClick:function(){//调用后判断图片的加载情况
     this.init();
     var img=new Image();
     if(Browser.ie){ 
         img.onreadystatechange=function(){
             if(img.readyState=="complete"||img.readyState=="loaded"){
                   PhotoShow.PhotoCallBack(img);
             }
         }
     }else if(Browser.Moz){
         img.onload=function(){
             if(img.complete==true){
                 PhotoShow.PhotoCallBack(img);
             }
         }
     }
     img.src=this.url;     
 },
 
 PhotoCallBack:function(obj){//再创建一个最上面的层
    var imgwidth=obj.width;
    var imgheight=obj.height;
    var Itop=(this.objHeight-imgheight)/2-15;
    var Ileft=(this.objWidth-imgwidth)/2;   
    var maindiv=document.createElement("div");
        maindiv.id="maindiv";
        with(maindiv.style){
             width=imgwidth+"px";
             height=imgheight+"px";
             position="absolute";            
             left=right=Ileft+"px";            
             top=bottom=Itop+"px";
             backgroundColor="skyblue";
             border="1px solid #000";
             padding="12px";
             paddingBottom="20px";
             zIndex=100;         
        }  
        maindiv.appendChild(obj);
        var closediv=document.createElement("div");
            closediv.width=imgwidth+20+"px";
            with(closediv.style){
                textAlign="center";
                background="#fff";
                fontSize="14px"    ;                            
            }
            var Lhref=document.createElement("A");
                Lhref.href="javascript:void(0)";                
                Lhref.appendChild(document.createTextNode("关 闭"));
                Lhref.onclick=function(){
                    PhotoShow.PhotoRemove();
                }        
                closediv.appendChild(Lhref);
             if(Browser.ie){                //由于ff与ie在加载对象方面出现了差异所以..
                 obj.insertAdjacentElement("afterEnd",closediv);
             }else if(Browser.Moz){
               obj.parentNode.insertBefore(closediv,obj);
            }
        document.body.insertBefore(maindiv,document.body.childNodes[0]);    
 } ,
 PhotoRemove:function(){     //移除对象
      if(document.getElementById("maindiv")){
         document.body.removeChild(document.getElementById("maindiv"));
     }
     if(document.getElementById("divscreen")){
         document.body.removeChild(document.getElementById("divscreen"));
     }     return false;
 }
}

</script>

<img src=http://www.xxx.com/1.jpg  onclick="PhotoShow.url=http://www.xxx.com/1.jpg ;PhotoShow.PhotoClick();" width="200" height="200"/>

-在多个浏览器上测试过没出现什么异常