JavaScript实现类似QQ、MSN消息提示的效果

最近论坛需要增加类似QQ、MSN消息提示的功能，从网上找了一些，感觉都不太方便，所以自己重新写了一个小东东，分享出来，希望对大家有用。

/////////////////////////////////////////////////////
// 2007-05-01
// EZERG [e-mail]
/////////////////////////////////////////////////////
function $(n){
	return document.getElementById(n);
}

function $i(i){
	try{
		return parseInt(i);
	}catch(ex){
		return 0;
	}
}

function MessageTip(id)
{
	this.id = id;
	this.obj = $(id);
	this.divTop = $i(this.obj.style.top);
	this.divLeft = $i(this.obj.style.left);
	this.divHeight = this.obj.offsetHeight;
	this.divWidth = this.obj.offsetWidth;
	this.docWidth = document.body.clientWidth;
	this.docHeight = document.body.clientHeight;
	this.timeout= 150;
	this.speed = 30;
	this.step = 3;
	this.timer = 0;
	this.pause = false;
	this.close = false;
	this.autoClose = true;
	this.add(this);
}

MessageTip.prototype.tips = new Array();

MessageTip.prototype.add = function(mt)
{
	this.tips.push(mt);
}

MessageTip.prototype.show = function()
{
	if(this.onload()){
  	var me = this;
  	var mess = this.obj;
  	mess.onmouseover = function(){me.pause=true;};
  	mess.onmouseout = function(){me.pause=false;};
  	mess.style.top = $i(document.body.scrollTop) + this.docHeight + 10;
  	mess.style.left = $i(document.body.scrollLeft) + this.docWidth - this.divWidth;	
  	mess.style.visibility = 'visible';
  	var moveUp = function()
  	{
  		var tHeight = me.divHeight;
  		var t = me.tips;
  		for(var i=0; i<t.length; i++){
  			var tt = t[i];
  			if(tt==me){
  				break;
  			}else{
  				tHeight += tt.divHeight + 3;
  			}
  		}
  		if($i(mess.style.top) <= (me.docHeight - tHeight + $i(document.body.scrollTop))){
        me.timeout--; 
        if(me.timeout==0){
  			  window.clearInterval(me.timer);
  				if(me.autoClose){
  					me.hide();
  				}
  			}
  		} else {
  			mess.style.top = $i(mess.style.top) - me.step;
  	  }
  	}
  	this.timer = window.setInterval(moveUp,this.speed);
  }
}

MessageTip.prototype.hide = function()
{
	if(this.onunload()){
		var me = this;
		var mess = this.obj;
    if(this.timer>0){
      window.clearInterval(me.timer);
    }
		var moveDown = function()
		{
			if(me.pause==false || me.close){
				if($i(mess.style.top) >= ($i(document.body.scrollTop) + me.docHeight + 10)){
			  	window.clearInterval(me.timer);
		  		mess.style.visibility='hidden';
				} else {
	  			mess.style.top = $i(mess.style.top) + me.step;
	  		}
		  }
	  }
	  this.timer = window.setInterval(moveDown,this.speed);
  }
}

MessageTip.prototype.resize = function()
{
	this.divHeight = $(this.id).offsetHeight;
	this.divWidth = $(this.id).offsetWidth;
	this.docWidth = document.body.clientWidth;
	this.docHeight = document.body.clientHeight;
	$(this.id).style.top = this.docHeight - this.divHeight + document.body.scrollTop;
	$(this.id).style.left = this.docWidth - this.divWidth + document.body.scrollLeft;	
}

MessageTip.prototype.onload = function()
{
	return true;
}

MessageTip.prototype.onunload = function()
{
	return true;
}

评论

8 楼 junjie314 2007-05-28  

我要源代码！

7 楼 whw200297132 2007-05-17  

窗口最大化时，提示框没跟着一起移动，位置没变

6 楼 pgty 2007-05-17  

melin 写道

不好，还带动了滚动条。看了很是不爽

你在页面里加上这行就没了
document.body.scroll='no';

5 楼 skyey 2007-05-16  

你在ff/opera下看看...

4 楼 inprise_lyj 2007-05-16  

还不错。

3 楼 pgty 2007-05-15  

谢谢楼主分享，改进一下就可以用了

2 楼 melin 2007-05-05  

不好，还带动了滚动条。看了很是不爽

1 楼 kj23 2007-05-04  

不想用prototype也不能把路给堵了啊

滚动条稍微有些异常