zoukankan      html  css  js  c++  java
  • asp.net 页面右下角弹出类似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?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=middle width='100%'>" + this.caption + "</TD>" 
            str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' valign=middle 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>

  • 相关阅读:
    LeetCode 242. Valid Anagram (验证变位词)
    LeetCode 205. Isomorphic Strings (同构字符串)
    LeetCode 204. Count Primes (质数的个数)
    LeetCode 202. Happy Number (快乐数字)
    LeetCode 170. Two Sum III
    LeetCode 136. Single Number (落单的数)
    LeetCode 697. Degree of an Array (数组的度)
    LeetCode 695. Max Area of Island (岛的最大区域)
    Spark中的键值对操作
    各种排序算法总结
  • 原文地址:https://www.cnblogs.com/ywqu/p/1242290.html
Copyright © 2011-2022 走看看