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