function imgshow( waitFor ) {
this.waitFor = waitFor;
this.waitCount = 0;
this.div = null;
this.image = null;

this.showInterval = 0;
this.waitInterval = 0;
this.visible = false;

this.waitInitialize = function() {
this.waitCount++;
if( document.getElementById(this.waitFor) || this.waitCount > 0 ) {
clearInterval( this.waitInterval );
this.initialize();
}
}

this.initialize = function() {
var that = this;
this.div = document.createElement( 'div' );
this.div.id = 'photo';
document.body.appendChild( this.div );
var anchors = document.getElementsByClassName('photourl');
for( var i=0; i<anchors.length; i++ ) {
var a = anchors[i];
a.onclick = function() { return that.show(this); }
}
}

this.showCallback = function() {
if(this.image.complete) {
clearInterval( this.showInterval );
msg = this.image ;
this.div.appendChild( msg );
}
}
this.show = function( anchor ) {
if( this.visible ) {
this.hide();
return false;
}

var n = anchor.title.split("-");
this.div.style.width = parseInt(n[0])+4+"px";
this.div.style.height = parseInt(n[1])+4+"px";
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
this.div.style.top = Math.max( yScroll + (document.documentElement.clientHeight - n[1] + 4 )/2, 0) + "px";
this.div.style.left = Math.max((document.documentElement.clientWidth - n[0] + 4 )/2, 0 ) + "px";
this.div.style.display = 'block';
this.image = new Image();
this.image.src = anchor.href;
var msg = document.createTextNode("");
this.div.innerHTML = "<img src=\"/usr/plugins/Album/close.png\" style=\"position:absolute;right:-10px;top:-10px;z-index:50;\" />";
this.div.appendChild( msg );
this.showInterval = setInterval(  function() { that.showCallback() }, 100 );
this.image.onclick = function() { return that.hide();}
this.visible = true;
return false;

}

this.hide = function() {
this.div.style.display = 'none';
this.div.removeChild( this.image );
this.image = null;
this.visible = false;
}

var that = this;
this.waitInterval = setInterval( function() { that.waitInitialize() }, 100 );
}var iv = new imgshow( 'pages' );
<span class = "AlbumThum" ><a href="1.jpg" class="photourl"><img src = "10.jpg"/></a></span>
<span class = "AlbumThum" ><a href="2.jpg" class="photourl"><img src = "20.jpg"/></a></span>
问题一: 如何this.div.innerHTML = "<img src=\"/usr/plugins/Album/close.png\" style=\"position:absolute;right:-10px;top:-10px;z-index:50;\" />";在层里插入一个图片 点击关闭层 并且不影响JS的继续执行。问题二: this.image.onclick 如果用 this.div.onclick 关闭层 会导致 层关闭后 再点图片 不弹出层 ,什么原因
如何搞定谢谢大家了。。

解决方案 »

  1.   

     var anchors = document.getElementsByClassName('photourl');这个 方法好像没有吧 楼主
      

  2.   

    this.hide = function() {
            this.div.style.display = 'none';
            this.div.removeChild( this.image );
            this.image = null;
            this.visible = false;
        }
        在这里加就可以啊,就是不知道你加到哪个层里,你可以在   this.div.style.display = 'none'; 之后 插入 
      

  3.   

    第二个问题,你在 onclick 里做条件判断就行啊, 如过你没反映肯定是 js出错了, firebug 或其他js调试工具看看