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

-

< 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  οnclick="PhotoShow.url=http://www.xxx.com/1.jpg ;PhotoShow.PhotoClick();" width="200" height="200"/>

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

转载于:https://www.cnblogs.com/xjie/archive/2009/09/02/1558634.html