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

页面右下角弹出类似QQ或MSN的消息提示

阅读更多
 <HTML><HEAD>
<TITLE>网页特效观止|JsCode.CN|---页面右下角弹出类似QQ或MSN的消息提示</TITLE>
<SCRIPT language=JavaScript> 
<!-- 
 
/**//* 
**    ================================================================================================== 
**    类名:CLASS_MSN_MESSAGE 
**    功能:提供类似MSN消息框 
**    示例: 
    --------------------------------------------------------------------------------------------------- 
 
            var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈"); 
                MSG.show(); 
 
    --------------------------------------------------------------------------------------------------- 
**    作者:ttyp 
**    邮件:ttyp@21cn.com 
**    日期:2005-3-18 
**    ================================================================================================== 
**/ 
 
 
/**//* 
*    消息构造 
*/ 
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){ 
    this.id     = id; 
    this.title  = title; 
    this.caption= caption; 
    this.message= message; 
    this.target = target; 
    this.action = action; 
    this.width    = width?width:200; 
    this.height = height?height:120; 
    this.timeout= 150; 
    this.speed    = 20;
    this.step    = 1;
    this.right    = screen.width -1; 
    this.bottom = screen.height;
    this.left    = this.right - this.width;
    this.top    = this.bottom - this.height;
    this.timer    = 0;
    this.pause    = false;
    this.close    = false;
    this.autoHide    = true;

 
/**//* 
*    隐藏消息方法 
*/ 
CLASS_MSN_MESSAGE.prototype.hide = function(){ 
    if(this.onunload()){ 
        var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
        var me  = this; 
        if(this.timer>0){  
            window.clearInterval(me.timer); 
        } 
        var fun = function(){ 
            if(me.pause==false||me.close){
                var x  = me.left;
                var y  = 0;
                var width = me.width;
                var height = 0;
                if(me.offset>0){
                    height = me.offset;
                }
    
                y  = me.bottom - height;
    
                if(y>=me.bottom){
                    window.clearInterval(me.timer); 
                    me.Pop.hide(); 
                } else {
                    me.offset = me.offset - me.step; 
                }
                me.Pop.show(x,y,width,height);   
            }            
        } 
        this.timer = window.setInterval(fun,this.speed)     
    } 

 
/**//* 
*    消息卸载事件,可以重写 
*/ 
CLASS_MSN_MESSAGE.prototype.onunload = function() { 
    return true; 

/**//* 
*    消息命令事件,要实现自己的连接,请重写它 

*/ 
CLASS_MSN_MESSAGE.prototype.oncommand = function(){ 
    //this.close = true;
    this.hide(); 
 window.open("http://www.baidu.com");
  
}
/**//* 
*    消息显示方法 
*/ 
CLASS_MSN_MESSAGE.prototype.show = function(){ 
    var oPopup = window.createPopup(); //IE5.5+ 
   
    this.Pop = oPopup; 
 
    var w = this.width; 
    var h = this.height; 
 
    var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>" 
        str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>" 
        str += "<TR>" 
        str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>" 
        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>" 
        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>" 
        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>" 
        str += "</TR>" 
        str += "<TR>" 
        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">" 
        str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>" 
        str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A>fghfghfghghghgh<A href='http://www.sohu.com' hidefocus=false id='ommand'><FONT color=#ff0000>dfgdfgfg</FONT></A></DIV>" 
        str += "</DIV>" 
        str += "</TD>" 
        str += "</TR>" 
        str += "</TABLE>" 
        str += "</DIV>" 
 
    oPopup.document.body.innerHTML = str;
   
 
    this.offset  = 0;
    var me  = this; 
    oPopup.document.body.onmouseover = function(){me.pause=true;}
    oPopup.document.body.onmouseout = function(){me.pause=false;}
    var fun = function(){ 
        var x  = me.left;
        var y  = 0;
        var width    = me.width;
        var height    = me.height;
            if(me.offset>me.height){
                height = me.height;
            } else {
                height = me.offset;
            }
        y  = me.bottom - me.offset;
        if(y<=me.top){
            me.timeout--;
            if(me.timeout==0){
                window.clearInterval(me.timer); 
                if(me.autoHide){
                    me.hide();
                }
            }
        } else {
            me.offset = me.offset + me.step;
        }
        me.Pop.show(x,y,width,height);   
    } 
 
    this.timer = window.setInterval(fun,this.speed)     
 
    
 
    var btClose = oPopup.document.getElementById("btSysClose"); 
 
    btClose.onclick = function(){ 
        me.close = true;
        me.hide(); 
    } 
 
    var btCommand = oPopup.document.getElementById("btCommand"); 
    btCommand.onclick = function(){ 
        me.oncommand(); 
    }   
  var ommand = oPopup.document.getElementById("ommand"); 
      ommand.onclick = function(){ 
       //this.close = true;
    me.hide(); 
 window.open(ommand.href);
    }  

/**//*
** 设置速度方法
**/
CLASS_MSN_MESSAGE.prototype.speed = function(s){
    var t = 20;
    try {
        t = praseInt(s);
    } catch(e){}
    this.speed = t;
}
/**//*
** 设置步长方法
**/
CLASS_MSN_MESSAGE.prototype.step = function(s){
    var t = 1;
    try {
        t = praseInt(s);
    } catch(e){}
    this.step = t;
}
 
CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){
    try {
        this.left        = left    !=null?left:this.right-this.width;
        this.right        = right    !=null?right:this.left +this.width;
        this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
        this.top        = top    !=null?top:this.bottom - this.height;
    } catch(e){}
}
var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈"); 
    MSG1.rect(null,null,null,screen.height-50);
    MSG1.speed    = 10;
    MSG1.step    = 5;
    //alert(MSG1.top);
    MSG1.show(); 
//同时两个有闪烁,只能用层代替了,不过层不跨框架
//var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊"); 
//   MSG2.rect(100,null,null,screen.height);
//    MSG2.show(); 
//--> 
</SCRIPT>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY></BODY></HTML> 
分享到:
评论

相关推荐

    【精华】页面右下角弹出类似QQ或MSN的消息提示

    标题中的“【精华】页面右下角弹出类似QQ或MSN的消息提示”指的是在网页设计中实现一种类似于即时通讯软件(如QQ、MSN)的消息提示功能。这种功能常见于许多网站,尤其是企业级应用,用于通知用户新消息、提醒或者...

    页面右下角弹出类似QQ或MSN的消息提示.rar

    总结一下,创建页面右下角弹出类似QQ或MSN的消息提示主要涉及以下步骤: 1. 创建HTML结构,包括弹窗容器、标题、内容区和关闭按钮。 2. 使用CSS进行样式设计,包括定位、尺寸、颜色和动画效果。 3. 使用JavaScript...

    页面右下角弹出消息提示框类似QQ或者MSN+ASP.NET

    在ASP.NET开发中,创建一个类似QQ或MSN的页面右下角弹出消息提示框功能是一项常见的需求。这种提示框可以用于通知用户、显示警告信息或者进行交互式操作反馈。以下是一个详细的实现步骤和相关知识点: 1. **CSS布局...

    页面右下角弹出类似QQ、MSN多条消息提示(提示可连接)

    标题提到的“页面右下角弹出类似QQ、MSN多条消息提示(提示可连接)”就是这样的一个设计,它允许网站向用户推送通知或消息,并且这些消息可以链接到本地页面或外部网址,从而引导用户进行特定的操作。 这个功能的...

    页面右下角弹出类似QQ或MSN的消息提示.pdf

    【网页右下角弹出类似QQ或MSN的消息提示】是一种常见的网页交互设计,通常用于向用户展示临时通知、系统消息或者广告信息。这种效果模仿了即时通讯软件如QQ和MSN的对话窗口弹出方式,能够吸引用户的注意力而不打扰其...

    CLASS_MSN_MESSAGE右下角弹出类似QQ或MSN消息提示.rar

    标题中的"CLASS_MSN_MESSAGE右下角弹出类似QQ或MSN消息提示.rar"指的是一个压缩文件,其中包含了一个文档,该文档可能详细介绍了如何在Windows操作系统中创建或模拟一种类名为"CLASS_MSN_MESSAGE"的弹窗效果,这种...

    页面右下角弹出类似QQ、MSN多条消息提示(提示消息有URL链接)

    在网页设计和用户体验优化中,实现“页面右下角弹出类似QQ、MSN多条消息提示(提示消息有URL链接)”的功能是一项常见的需求。这样的功能可以让用户在浏览网站时,实时接收并交互与网站内容相关的通知,提升用户的参与...

    ASP.NET版 仿QQ MSN 右下角 弹出窗口 提示小窗口 控件

    ASP.NET版 仿QQ MSN 右下角 弹出窗口 提示小窗口 控件仿MSN右下角的弹出窗口控件,实际上不仅仅局限于右下角,网页的其它地方都可以用,这是Asp.net修正版。  源代码中包括C#、VB.net两种代码的示例,以及控件源...

    右下角弹出消息 迅雷 QQ MSN

    标题中的“右下角弹出消息 迅雷 QQ MSN”指的是在计算机桌面右下角的通知区域(系统托盘)中出现的消息提示功能,这种功能常见于各种即时通讯软件如迅雷、QQ和MSN(现在已经更名为Skype for Business)。这些应用会...

    真正屏幕右下角弹出消息窗口

    标题中的“真正屏幕右下角弹出消息窗口”是指一种技术实现,它允许在操作系统桌面的右下角创建一个独立的、不会随主窗口最小化而消失的通知窗口。这种技术通常用于模仿像QQ和MSN这样的即时通讯软件的提醒功能,它们...

    像qq一样的右下角弹出提示窗口

    在IT行业中,创建类似QQ和MSN的右下角弹出提示窗口是一项常见的需求,这种功能主要用于应用程序的通知系统,能够在不打扰用户主界面操作的情况下提供重要信息。这些提示窗口通常被称为气泡通知或托盘通知,它们会在...

    ASP.NET编写像QQ和MSN一样右下角弹出窗体显示消息视频教程

    本教程专注于使用ASP.NET实现类似QQ和MSN的右下角弹出窗体功能,旨在帮助开发者学习如何在网页中实现即时通知,提升用户体验。 在描述中提到的"屏幕右下角实现动态弹出信息框",这通常涉及到JavaScript或jQuery等...

    类似QQ,MSN,邮箱右下角消息提示,定时访问数据库。

    标题中的“类似QQ,MSN,邮箱右下角消息提示,定时访问数据库”指的是在软件开发中实现一种即时通讯功能,这种功能类似于我们熟知的QQ、MSN(现已被Skype取代)以及电子邮件系统中的消息通知机制。它涉及到客户端的...

    outlook2007新邮件来时右下角出现类似于qq,msn的提示

    标题中的“outlook2007新邮件来时右下角出现类似于qq,msn的提示”指的是在使用Microsoft Outlook 2007时,当收到新邮件时,用户希望在电脑屏幕的右下角能像QQ或MSN即时通讯软件那样,有一个弹出式的通知窗口。...

    asp.net类似QQ,MSN,邮箱右下角消息提示,定时访问数据库。

    在ASP.NET中实现类似QQ、MSN或邮箱右下角的消息提示功能,主要是通过实时更新用户界面来提供即时反馈,这通常涉及到AJAX技术、Web Socket、SignalR等实时通信技术。 首先,我们要理解这个功能的核心需求:当有新...

    仿QQ.MSN消息提示界面

    首先,我们要理解“右下角自下而上弹出消息窗体”的设计。这种设计通常被称为“气泡提示”或“浮层提示”,它会在屏幕的右下角位置从底部向上滑动出现,以吸引用户的注意力。这种动画效果可以使用CSS3或者各种前端...

    新消息提示 MSN QQ 右下角提示

    标题中的“新消息提示 MSN QQ 右下角提示”是指在C#编程环境中实现的一种功能,它模拟了MSN(Microsoft Messenger)和QQ等即时通讯软件的系统托盘区域(右下角)的新消息提醒机制。这个功能允许开发者在自己的应用...

Global site tag (gtag.js) - Google Analytics