System Information

Impossible Is Nothing...

导航

[转]MSN消息提示类(纯js编写)

  1 <script language="JavaScript">   
  2 <!--   
  3    
  4 /*   
  5 **    ==================================================================================================   
  6 **    类名:CLASS_MSN_MESSAGE   
  7 **    功能:提供类似MSN消息框   
  8 **    示例:   
  9     ---------------------------------------------------------------------------------------------------   
 10    
 11             var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");   
 12                 MSG.show();   
 13    
 14     ---------------------------------------------------------------------------------------------------   
 15 **    作者:ttyp   
 16 **    邮件:ttyp@21cn.com   
 17 **    日期:2005-2-1   
 18 **    ==================================================================================================   
 19 **/   
 20    
 21    
 22 /*   
 23  *    消息构造   
 24  */   
 25 function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action)   
 26 {   
 27     this.id     = id;   
 28     this.title  = title;   
 29     this.caption= caption;   
 30     this.message= message;   
 31     this.target = target;   
 32     this.action = action;   
 33     this.width  = width?width:200;   
 34     this.height = height?height:120;   
 35     this.timeout= 3000;   
 36     this.speed  = 20;  
 37     this.step   = 1;  
 38   
 39     this.left   = 0;  
 40     this.right  = screen.availWidth -1;   
 41     this.top    = 0;  
 42     this.bottom = screen.availHeight;  
 43     this.autoHideTimeOut = 0
 44 }   
 45    
 46 /*   
 47  *    隐藏消息方法   
 48  */   
 49 CLASS_MSN_MESSAGE.prototype.hide = function()   
 50 {   
 51     if(this.onunload())       
 52     {   
 53         this.Pop.hide();   
 54         if(this.timer)   
 55         {   
 56             window.clearInterval(this.timer);   
 57         }   
 58     }   
 59 }   
 60    
 61 /*   
 62  *    消息卸载事件,可以重写   
 63  */   
 64 CLASS_MSN_MESSAGE.prototype.onunload = function()   
 65 {   
 66     return true;   
 67 }   
 68 /*   
 69  *    消息命令事件,要实现自己的连接,请重写它   
 70  *   
 71  */   
 72 CLASS_MSN_MESSAGE.prototype.oncommand = function()   
 73 {   
 74     alert(this.message);   
 75     this.hide();   
 76 }   
 77    
 78 /*   
 79  *    消息显示方法   
 80  */   
 81 CLASS_MSN_MESSAGE.prototype.show = function()   
 82 {   
 83     var oPopup = window.createPopup(); //IE5.5+   
 84    
 85     this.Pop = oPopup;   
 86    
 87     var w = this.width;   
 88     var h = this.height;   
 89    
 90     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'>"   
 91         str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"   
 92         str += "<TR>"   
 93         str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"   
 94         str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"   
 95         str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"   
 96         str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"   
 97         str += "</TR>"   
 98         str += "<TR>"   
 99         str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28+ ">"   
100         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>"   
101         str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>"   
102         str += "</DIV>"   
103         str += "</TD>"   
104         str += "</TR>"   
105         str += "</TABLE>"   
106         str += "</DIV>"   
107    
108     oPopup.document.body.innerHTML = str;   
109    
110     var docWidth    = this.right;   
111     var docHeight   = this.bottom-h;   
112     var offset      = screen.height - screen.availHeight;   
113   
114     var me          = this;   
115     var timer;   
116   
117     var fun = function()   
118     {   
119         oPopup.show(docWidth-w, docHeight + offset, w, h);     
120         if(offset <= 0)   
121         {   
122             window.clearInterval(timer);   
123             if(me.autoHideTimeOut>0
124             { 
125                 window.setTimeout(function(){me.hide()},me.autoHideTimeOut); 
126             } 
127         }   
128         offset = offset - me.step;   
129    
130     }   
131  
132     if(typeof(this.speed)!="number"||this.speed<=0
133     { 
134         this.speed = 20
135     } 
136  
137     timer = window.setInterval(fun,this.speed)       
138    
139       
140    
141     var btClose = oPopup.document.getElementById("btSysClose");   
142    
143     btClose.onclick = function()   
144     {   
145         me.hide();   
146     }   
147    
148     var btCommand = oPopup.document.getElementById("btCommand");   
149     btCommand.onclick = function()   
150     {   
151         me.oncommand();   
152     }   
153    
154     this.timer = timer;   
155    
156 }   
157    
158 CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom)  
159 {  
160     try  
161     {  
162         this.left   = left    ?left    :0;  
163         this.right  = right    ?right    :screen.availWidth -1;  
164         this.top    = top    ?top    :0;  
165         this.bottom = bottom?bottom    :screen.availHeight;  
166     }  
167     catch(e)  
168     {}  
169 }  
170   
171 var msg1 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");   
172     msg1.speed = 20
173     msg1.autoHideTimeOut = 2000
174     msg1.show();   
175   
176 //同时两个有闪烁,只能用层代替了,不过层不跨框架  
177 //var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊");   
178 //      MSG2.rect(0,null,0,screen.availHeight-120);  
179 //    MSG2.show();   
180   
181 //-->   
182 </script> 
  • 纯js编写
  • 跨框架
  • 无图片
  • 支持调速度
  • 任意位置弹出
  • 需要ie5.5以上

 

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

from:http://ttyp.cnblogs.com

posted on 2006-01-12 08:55  SysInfo  阅读(1003)  评论(0编辑  收藏  举报