`
wzw00001
  • 浏览: 89050 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多
/////////////////////////////////////////////////////  
// 鲤鱼论坛 - http://LiyuNet.Com/bbs  
// 2007-05-01  
// EZERG liyunet@yeah.net  
/////////////////////////////////////////////////////  
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
分享到:
评论

相关推荐

    javascript实现弹消息提示框 像各大邮箱提示有新邮件收到或QQ和MSN提示

    javascript实现弹消息提示框 像各大邮箱提示有新邮件收到或QQ和MSN提示 页面右下角弹出类似QQ或MSN的消息提示

    JS实现定时页面弹出类似QQ新闻的提示框

    还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出)。当时上网找的这么一个资料,已经不记得原文出处了 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;...

    程序天下:JavaScript实例自学手册

    5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表...

    JAVA上百实例源码以及开源项目

     //给客户发一个感谢消息,消息驱动Bean必须实现两个接口MessageDrivenBean和MessageListener  在对象创建的过程中将被容器调用,onMessage函数方法接收消息参数,将其强制转型为合适的消息类型,同时打印出消息...

    JAVA上百实例源码以及开源项目源代码

     //给客户发一个感谢消息,消息驱动Bean必须实现两个接口MessageDrivenBean和MessageListener  在对象创建的过程中将被容器调用,onMessage函数方法接收消息参数,将其强制转型为合适的消息类型,同时打印出消息...

    asp.net知识库

    在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上,会显示图片(类似tooltip) 使用microsoft.web.ui.webcontrols的TabStrip与IFame组件,达到页的切换效果 HttpModule 实现 ASP.Net (*....

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

     4.SQL Server与Windows NT完全集成,利用了NT的许多功能,如发送和接受消息,管理登录安全性等。SQL Server也可以很好地与Microsoft BackOffice产品集成。  5.具有很好的伸缩性,可跨越从运行Windows 95/98的...

    网管教程 从入门到精通软件篇.txt

    、Lipper、FoxPro、Arago、Wordtech、Xbase和类似数据库或与数据库有关产品识别;可用数据文件(能被Excel 97打开);Oracle 8.1.x表格空间文件 DBX:DataBearn图像;Microsoft Visual FoxPro表格文件 DCT:...

Global site tag (gtag.js) - Google Analytics