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

  1<SCRIPT language=JavaScript>      
  2<!--      
  3     
  4/**//**//**//*      
  5*    消息构造      
  6*/      
  7function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action){      
  8    this.id     = id;      
  9    this.title  = title;      
 10    this.caption= caption;      
 11    this.message= message;      
 12    this.target = target;      
 13    this.action = action;      
 14    this.width    = width?width:200;      
 15    this.height = height?height:120;      
 16    this.timeout= 150;      
 17    this.speed    = 20;     
 18    this.step    = 1;     
 19    this.right    = screen.width -1;      
 20    this.bottom = screen.height;     
 21    thisthis.left    = this.right - this.width;     
 22    thisthis.top    = this.bottom - this.height;     
 23    this.timer    = 0;     
 24    this.pause    = false;    
 25    this.close    = false;    
 26    this.autoHide    = true;    
 27}      
 28      
 29/**//**//**//*      
 30*    隐藏消息方法      
 31*/      
 32CLASS_MSN_MESSAGE.prototype.hide = function(){      
 33    if(this.onunload()){      
 34   
 35        var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top;     
 36        var me  = this;      
 37   
 38        if(this.timer>0){       
 39            window.clearInterval(me.timer);      
 40        }      
 41   
 42        var fun = function(){      
 43            if(me.pause==false||me.close){    
 44                var x  = me.left;     
 45                var y  = 0;     
 46                var width = me.width;     
 47                var height = 0;     
 48                if(me.offset>0){     
 49                    height = me.offset;     
 50                }     
 51         
 52                y  = me.bottom - height;     
 53         
 54                if(y>=me.bottom){     
 55                    window.clearInterval(me.timer);      
 56                    me.Pop.hide();      
 57                } else {     
 58                    meme.offset = me.offset - me.step;      
 59                }     
 60                me.Pop.show(x,y,width,height);        
 61            }                 
 62        }      
 63   
 64        this.timer = window.setInterval(fun,this.speed)          
 65    }      
 66}      
 67      
 68/**//**//**//*      
 69*    消息卸载事件，可以重写      
 70*/      
 71CLASS_MSN_MESSAGE.prototype.onunload = function() {      
 72    return true;      
 73}      
 74/**//**//**//*      
 75*    消息命令事件，要实现自己的连接，请重写它      
 76*      
 77*/      
 78CLASS_MSN_MESSAGE.prototype.oncommand = function(){      
 79    //this.close = true;    
 80    this.hide();      
 81    window.open("http://www.makewing.com");    
 82       
 83}     
 84/**//**//**//*      
 85*    消息显示方法      
 86*/      
 87CLASS_MSN_MESSAGE.prototype.show = function(){      
 88   
 89    var oPopup = window.createPopup(); //IE5.5+      
 90        
 91    this.Pop = oPopup;      
 92      
 93    var w = this.width;      
 94    var h = this.height;      
 95      
 96    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'>"      
 97        str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"      
 98        str += "<TR>"      
 99        str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"      
100        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"      
101        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"      
102        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"      
103        str += "</TR>"      
104        str += "<TR>"      
105        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"      
106        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>"      
107        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> - <A href='http://www.makewing.com' hidefocus=false id='ommand'><FONT color=#ff0000>网页素材下载站</FONT></A></DIV>"      
108        str += "</DIV>"      
109        str += "</TD>"      
110        str += "</TR>"      
111        str += "</TABLE>"      
112        str += "</DIV>"      
113      
114    oPopup.document.body.innerHTML = str;     
115        
116      
117    this.offset  = 0;     
118    var me  = this;      
119   
120    oPopup.document.body.onmouseover = function(){me.pause=true;}    
121    oPopup.document.body.onmouseout = function(){me.pause=false;}    
122   
123    var fun = function(){      
124        var x  = me.left;     
125        var y  = 0;     
126        var width    = me.width;     
127        var height    = me.height;     
128   
129            if(me.offset>me.height){     
130                height = me.height;     
131            } else {     
132                height = me.offset;     
133            }     
134   
135        y  = me.bottom - me.offset;     
136        if(y<=me.top){     
137            me.timeout--;     
138            if(me.timeout==0){     
139                window.clearInterval(me.timer);      
140                if(me.autoHide){    
141                    me.hide();     
142                }    
143            }     
144        } else {     
145            meme.offset = me.offset + me.step;     
146        }     
147        me.Pop.show(x,y,width,height);        
148   
149    }      
150      
151    this.timer = window.setInterval(fun,this.speed)          
152      
153         
154      
155    var btClose = oPopup.document.getElementById("btSysClose");      
156      
157    btClose.onclick = function(){      
158        me.close = true;    
159        me.hide();      
160    }      
161      
162    var btCommand = oPopup.document.getElementById("btCommand");      
163    btCommand.onclick = function(){      
164        me.oncommand();      
165    }        
166     var ommand = oPopup.document.getElementById("ommand");      
167      ommand.onclick = function(){      
168       //this.close = true;    
169    me.hide();      
170    window.open(ommand.href);    
171    }       
172}      
173/**//**//**//*     
174** 设置速度方法     
175**/     
176CLASS_MSN_MESSAGE.prototype.speed = function(s){     
177    var t = 20;     
178    try {     
179        t = praseInt(s);     
180    } catch(e){}     
181    tthis.speed = t;     
182}     
183/**//**//**//*     
184** 设置步长方法     
185**/     
186CLASS_MSN_MESSAGE.prototype.step = function(s){     
187    var t = 1;     
188    try {     
189        t = praseInt(s);     
190    } catch(e){}     
191    tthis.step = t;     
192}     
193      
194CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom){     
195    try {     
196        this.left        = left    !=null?left:this.right-this.width;     
197        this.right        = right    !=null?right:this.left +this.width;     
198        this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;     
199        this.top        = top    !=null?top:this.bottom - this.height;     
200    } catch(e){}     
201}     
202var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","懒人图库");      
203    MSG1.rect(null,null,null,screen.height-50);     
204    MSG1.speed    = 10;     
205    MSG1.step    = 5;     
206    //alert(MSG1.top);     
207    MSG1.show();      
208   
209//同时两个有闪烁，只能用层代替了，不过层不跨框架     
210//var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊");      
211//   MSG2.rect(100,null,null,screen.height);     
212//    MSG2.show();      
213//-->      
214</SCRIPT>