[转]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