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

/////////////////////////////////////////////////////  
// 鲤鱼论坛 - http://LiyuNet.Com/bbs  
// 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;  
}  


来源:http://www.iteye.com/topic/76993