msnMessage.js文件代码：
1 /** 2 ** ================================================================================================== 3 ** 类名：msnMessage 4 ** 功能：提供类似MSN消息框 5 ** 示例： 6 -------------------------------------------------------------------------------------------------- 7 var MSG = new msnMessage("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈"); 8 MSG.show(); 9 10 -------------------------------------------------------------------------------------------------- 11 ** 作者：juhnpen(在原作者ttyp的基础上做了点改动) 12 ** 邮件：juhnpen@126.com(原作者信箱ttyp@21cn.com) 13 ** 日期：2008-10-13 14 ** ================================================================================================== 15 **/ 16 /** 17 ** 消息构造 18 **/ 19 function msnMessage(id,width,height,caption,title,message,target,action) 20 { 21 this.id = id; 22 this.title = title; 23 this.caption= caption; 24 this.message= message; 25 this.target = target; 26 this.action = action; 27 this.width = width?width:200; 28 this.height = height?height:120; 29 this.timeout= 300; 30 this.speed = 20; 31 this.step = 1; 32 this.right = screen.width -1; 33 this.bottom = screen.height; 34 this.left = this.right - this.width; 35 this.top = this.bottom - this.height; 36 this.timer = 0; 37 this.pause = false; 38 this.close = false; 39 this.autoHide = true; 40 } 41 /** 42 ** 隐藏消息方法 43 **/ 44 msnMessage.prototype.hide = function() 45 { 46 if(this.onunload()) 47 { 48 var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top; 49 var me = this; 50 51 if(this.timer>0) 52 { 53 window.clearInterval(me.timer); 54 } 55 var fun = function() 56 { 57 if(me.pause==false||me.close) 58 { 59 var x = me.left; 60 var y = 0; 61 var width = me.width; 62 var height = 0; 63 if(me.offset>0) 64 { 65 height = me.offset; 66 } 67 68 y = me.bottom - height; 69 70 if(y>=me.bottom) 71 { 72 window.clearInterval(me.timer); 73 me.Pop.hide(); 74 } 75 else 76 { 77 me.offset = me.offset - me.step; 78 } 79 me.Pop.show(x,y,width,height); 80 } 81 } 82 this.timer = window.setInterval(fun,this.speed) 83 } 84 } 85 /** 86 ** 消息卸载事件，可以重写 87 **/ 88 msnMessage.prototype.onunload = function() 89 { 90 return true; 91 } 92 /** 93 ** 消息命令事件，要实现自己的连接，请重写它 94 ** 95 **/ 96 msnMessage.prototype.oncommand = function() 97 { 98 this.close = true; 99 this.hide(); 100 window.open(this.target); 101 } 102 /** 103 ** 消息显示方法 104 **/ 105 msnMessage.prototype.show=function() 106 { 107 var oPopup = window.createPopup(); //IE5.5+ 108 this.Pop = oPopup; 109 var w = this.width; 110 var h = this.height; 111 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'>"; 112 str += "<TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" mce_style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"; 113 str += "<TR>"; 114 str += "<TD style="FONT-SIZE: 12px;COLOR: #0f2c8c" mce_style="FONT-SIZE: 12px;COLOR: #0f2c8c" width=30 height=24></TD>"; 115 str += "<TD style="PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px" mce_style="PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px" vAlign=center width='100%'>" + this.caption + "</TD>"; 116 str += "<TD style="PADDING-RIGHT: 2px; PADDING-TOP: 2px" mce_style="PADDING-RIGHT: 2px; PADDING-TOP: 2px" vAlign=center align=right width=19>"; 117 str += "<SPAN title=关闭 style="FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px" mce_style="FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px" id='btSysClose' >×</SPAN></TD>"; 118 str += "</TR>"; 119 str += "<TR>"; 120 str += "<TD style="PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px" mce_style="PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px" colSpan=3 height=" + (h-28) + ">"; 121 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>"; 122 str += "<DIV style="WORD-BREAK: break-all" mce_style="WORD-BREAK: break-all" align=left><A href="javascript:void(0)" mce_href="javascript:void(0)" hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>"; 123 str += "</DIV>"; 124 str += "</TD>"; 125 str += "</TR>" 126 str += "</TABLE>"; 127 str += "</DIV>"; 128 oPopup.document.body.innerHTML = str; 129 this.offset = 0; 130 var me = this; 131 oPopup.document.body.onmouseover = function(){me.pause=true;} 132 oPopup.document.body.onmouseout = function(){me.pause=false;} 133 var fun = function() 134 { 135 var x = me.left; 136 var y = 0; 137 var width = me.width; 138 var height = me.height; 139 if(me.offset>me.height) 140 { 141 height = me.height; 142 } 143 else 144 { 145 height = me.offset; 146 } 147 y = me.bottom - me.offset; 148 if(y<=me.top) 149 { 150 me.timeout--; 151 if(me.timeout==0) 152 { 153 window.clearInterval(me.timer); 154 if(me.autoHide) 155 { 156 me.hide(); 157 } 158 } 159 } 160 else 161 { 162 me.offset = me.offset + me.step; 163 } 164 me.Pop.show(x,y,width,height); 165 } 166 this.timer = window.setInterval(fun,this.speed) 167 var btClose = oPopup.document.getElementById("btSysClose"); 168 btClose.onclick = function() 169 { 170 me.close = true; 171 me.hide(); 172 } 173 var btCommand = oPopup.document.getElementById("btCommand"); 174 btCommand.onclick = function() 175 { 176 me.oncommand(); 177 } 178 } 179 /** 180 ** 设置速度方法 181 **/ 182 msnMessage.prototype.speed = function(s) 183 { 184 var t = 20; 185 try 186 { 187 t = praseInt(s); 188 } 189 catch(e) 190 {} 191 this.speed = t; 192 } 193 /**//* 194 ** 设置步长方法 195 **/ 196 msnMessage.prototype.step = function(s) 197 { 198 var t = 1; 199 try 200 { 201 t = praseInt(s); 202 } 203 catch(e) 204 {} 205 this.step = t; 206 } 207 msnMessage.prototype.rect = function(left,right,top,bottom) 208 { 209 try { 210 this.left = left != null?left:this.right-this.width; 211 this.right = right != null?right:this.left +this.width; 212 this.bottom = bottom !=null?(bottom>screen.height?screen.height:bottom):screen.height; 213 this.top = top !=null?top:this.bottom - this.height; 214 } 215 catch(e) 216 {} 217 } 218
调用代码：
<mce:script language="javascript" type="text/javascript"><!-- var msg1 = new msnMessage("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈","11.htm"); msg1.rect(null,null,null,screen.height-50); msg1.speed = 10; msg1.step = 5; //alert(msg1.top); msg1.show(); //同时两个有闪烁，只能用层代替了，不过层不跨框架 var msg2 = new msnMessage("aa",200,120,"短消息提示：","您有2封消息","好的啊","22.htm"); msg2.rect(100,null,null,screen.height); msg2.show(); // --></mce:script>
注意：如果是在asp.net中，js文件中包含的字符通过innerHTML输出后会显示乱码，作如下改动：
1.Web.config中加入 <system.web> <globalization requestEncoding="utf-8" responseEncoding="utf-8" /> </system.web> 2.Aspx页面文件中加入 <META http-equiv="content-type" content="text/html; charset=gb2312"> 3.在页面加载事件中加入下句： Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");
原因是如果js写在asp.net中，一般是不会出现乱码的问题。因为他们具有相同的编码。如果需要引用外部的javascript代码就会有乱码的风险了。一般情况下Asp.net和Javascript的页面编码不是GB2312就是Utf-8 ，如果两者的编码不一致就会产生乱码。解决方法就是想两者的编码进行统一。由于一般情况下Asp.net接受发送请求的编码是Utf-8的，javascript编码默认是Gb2312，故容易出现问题。
