- 纯js编写
- 跨框架
- 无图片
- 支持调速度
- 任意位置弹出
- 需要ie5.5以上
<
HTML
><
HEAD
>
< SCRIPTlanguage = JavaScript >
<!--
/**/ /*
**==================================================================================================
**类名:CLASS_MSN_MESSAGE
**功能:提供类似MSN消息框
**示例:
---------------------------------------------------------------------------------------------------
varMSG=newCLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");
MSG.show();
---------------------------------------------------------------------------------------------------
**作者:ttyp
**邮件:ttyp@21cn.com
**日期:2005-3-18
**==================================================================================================
**/
/**/ /*
*消息构造
*/
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action) {
this.id=id;
this.title=title;
this.caption=caption;
this.message=message;
this.target=target;
this.action=action;
this.width=width?width:200;
this.height=height?height:120;
this.timeout=150;
this.speed=20;
this.step=1;
this.right=screen.width-1;
this.bottom=screen.height;
this.left=this.right-this.width;
this.top=this.bottom-this.height;
this.timer=0;
this.pause=false;
this.close=false;
this.autoHide=true;
}
/**/ /*
*隐藏消息方法
*/
CLASS_MSN_MESSAGE.prototype.hide = function () {
if(this.onunload()){
varoffset=this.height>this.bottom-this.top?this.height:this.bottom-this.top;
varme=this;
if(this.timer>0){
window.clearInterval(me.timer);
}
varfun=function(){
if(me.pause==false||me.close){
varx=me.left;
vary=0;
varwidth=me.width;
varheight=0;
if(me.offset>0){
height=me.offset;
}
y=me.bottom-height;
if(y>=me.bottom){
window.clearInterval(me.timer);
me.Pop.hide();
}else{
me.offset=me.offset-me.step;
}
me.Pop.show(x,y,width,height);
}
}
this.timer=window.setInterval(fun,this.speed)
}
}
/**/ /*
*消息卸载事件,可以重写
*/
CLASS_MSN_MESSAGE.prototype.onunload = function () {
returntrue;
}
/**/ /*
*消息命令事件,要实现自己的连接,请重写它
*
*/
CLASS_MSN_MESSAGE.prototype.oncommand = function () {
this.close=true;
this.hide();
}
/**/ /*
*消息显示方法
*/
CLASS_MSN_MESSAGE.prototype.show = function () {
varoPopup=window.createPopup();//IE5.5+
this.Pop=oPopup;
varw=this.width;
varh=this.height;
varstr="<DIVstyle='BORDER-RIGHT:#4556901pxsolid;BORDER-TOP:#a6b4cf1pxsolid;Z-INDEX:99999;LEFT:0px;BORDER-LEFT:#a6b4cf1pxsolid;WIDTH:"+w+"px;BORDER-BOTTOM:#4556901pxsolid;POSITION:absolute;TOP:0px;HEIGHT:"+h+"px;BACKGROUND-COLOR:#c9d3f3'>"
str+="<TABLEstyle='BORDER-TOP:#ffffff1pxsolid;BORDER-LEFT:#ffffff1pxsolid'cellSpacing=0cellPadding=0width='100%'bgColor=#cfdef4border=0>"
str+="<TR>"
str+="<TDstyle='FONT-SIZE:12px;COLOR:#0f2c8c'width=30height=24></TD>"
str+="<TDstyle='PADDING-LEFT:4px;FONT-WEIGHT:normal;FONT-SIZE:12px;COLOR:#1f336b;PADDING-TOP:4px'vAlign=centerwidth='100%'>"+this.caption+"</TD>"
str+="<TDstyle='PADDING-RIGHT:2px;PADDING-TOP:2px'vAlign=centeralign=rightwidth=19>"
str+="<SPANtitle= 关闭style='FONT-WEIGHT:bold;FONT- SIZE:12px;CURSOR:hand;COLOR:red;MARGIN-RIGHT:4px'id='btSysClose'>×</SPAN></TD>"
str+="</TR>"
str+="<TR>"
str+="<TDstyle='PADDING-RIGHT:1px;PADDING-BOTTOM:1px'colSpan=3height="+(h-28)+">"
str+="<DIVstyle='BORDER-RIGHT:#b9c9ef1pxsolid;PADDING-RIGHT:8px;BORDER-TOP:#728eb81pxsolid;PADDING-LEFT:8px;FONT-SIZE:12px;PADDING-BOTTOM:8px;BORDER-LEFT:#728eb81pxsolid;WIDTH:100%;COLOR:#1f336b;PADDING-TOP:8px;BORDER-BOTTOM:#b9c9ef1pxsolid;HEIGHT:100%'>"+this.title+"<BR><BR>"
str+="<DIVstyle='WORD-BREAK:break-all'align=left><Ahref='javascript:void(0)'hidefocus=trueid='btCommand'><FONTcolor=#ff0000>"+this.message+"</FONT></A></DIV>"
str+="</DIV>"
str+="</TD>"
str+="</TR>"
str+="</TABLE>"
str+="</DIV>"
oPopup.document.body.innerHTML=str;
this.offset=0;
varme=this;
oPopup.document.body.onmouseover=function(){me.pause=true;}
oPopup.document.body.onmouseout=function(){me.pause=false;}
varfun=function(){
varx=me.left;
vary=0;
varwidth=me.width;
varheight=me.height;
if(me.offset>me.height){
height=me.height;
}else{
height=me.offset;
}
y=me.bottom-me.offset;
if(y<=me.top){
me.timeout--;
if(me.timeout==0){
window.clearInterval(me.timer);
if(me.autoHide){
me.hide();
}
}
}else{
me.offset=me.offset+me.step;
}
me.Pop.show(x,y,width,height);
}
this.timer=window.setInterval(fun,this.speed)
varbtClose=oPopup.document.getElementById("btSysClose");
btClose.onclick=function(){
me.close=true;
me.hide();
}
varbtCommand=oPopup.document.getElementById("btCommand");
btCommand.onclick=function(){
me.oncommand();
}
}
/**/ /*
**设置速度方法
**/
CLASS_MSN_MESSAGE.prototype.speed = function (s) {
vart=20;
try{
t=praseInt(s);
}catch(e){}
this.speed=t;
}
/**/ /*
**设置步长方法
**/
CLASS_MSN_MESSAGE.prototype.step = function (s) {
vart=1;
try{
t=praseInt(s);
}catch(e){}
this.step=t;
}
CLASS_MSN_MESSAGE.prototype.rect = function (left,right,top,bottom) {
try{
this.left=left!=null?left:this.right-this.width;
this.right=right!=null?right:this.left+this.width;
this.bottom=bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
this.top=top!=null?top:this.bottom-this.height;
}catch(e){}
}
var MSG1 = new CLASS_MSN_MESSAGE( " aa " , 200 , 120 , " 短消息提示: " , " 您有1封消息 " , " 今天请我吃饭哈 " );
MSG1.rect( null , null , null ,screen.height - 50 );
MSG1.speed = 10 ;
MSG1.step = 5 ;
// alert(MSG1.top);
MSG1.show();
// 同时两个有闪烁,只能用层代替了,不过层不跨框架
// varMSG2=newCLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊");
// MSG2.rect(100,null,null,screen.height);
// MSG2.show();
// -->
</ SCRIPT >
< METAcontent = " MSHTML6.00.2800.1106 " name = GENERATOR ></ HEAD >
< BODY ></ BODY ></ HTML >
< SCRIPTlanguage = JavaScript >
<!--
/**/ /*
**==================================================================================================
**类名:CLASS_MSN_MESSAGE
**功能:提供类似MSN消息框
**示例:
---------------------------------------------------------------------------------------------------
varMSG=newCLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有1封消息","今天请我吃饭哈");
MSG.show();
---------------------------------------------------------------------------------------------------
**作者:ttyp
**邮件:ttyp@21cn.com
**日期:2005-3-18
**==================================================================================================
**/
/**/ /*
*消息构造
*/
function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action) {
this.id=id;
this.title=title;
this.caption=caption;
this.message=message;
this.target=target;
this.action=action;
this.width=width?width:200;
this.height=height?height:120;
this.timeout=150;
this.speed=20;
this.step=1;
this.right=screen.width-1;
this.bottom=screen.height;
this.left=this.right-this.width;
this.top=this.bottom-this.height;
this.timer=0;
this.pause=false;
this.close=false;
this.autoHide=true;
}
/**/ /*
*隐藏消息方法
*/
CLASS_MSN_MESSAGE.prototype.hide = function () {
if(this.onunload()){
varoffset=this.height>this.bottom-this.top?this.height:this.bottom-this.top;
varme=this;
if(this.timer>0){
window.clearInterval(me.timer);
}
varfun=function(){
if(me.pause==false||me.close){
varx=me.left;
vary=0;
varwidth=me.width;
varheight=0;
if(me.offset>0){
height=me.offset;
}
y=me.bottom-height;
if(y>=me.bottom){
window.clearInterval(me.timer);
me.Pop.hide();
}else{
me.offset=me.offset-me.step;
}
me.Pop.show(x,y,width,height);
}
}
this.timer=window.setInterval(fun,this.speed)
}
}
/**/ /*
*消息卸载事件,可以重写
*/
CLASS_MSN_MESSAGE.prototype.onunload = function () {
returntrue;
}
/**/ /*
*消息命令事件,要实现自己的连接,请重写它
*
*/
CLASS_MSN_MESSAGE.prototype.oncommand = function () {
this.close=true;
this.hide();
}
/**/ /*
*消息显示方法
*/
CLASS_MSN_MESSAGE.prototype.show = function () {
varoPopup=window.createPopup();//IE5.5+
this.Pop=oPopup;
varw=this.width;
varh=this.height;
varstr="<DIVstyle='BORDER-RIGHT:#4556901pxsolid;BORDER-TOP:#a6b4cf1pxsolid;Z-INDEX:99999;LEFT:0px;BORDER-LEFT:#a6b4cf1pxsolid;WIDTH:"+w+"px;BORDER-BOTTOM:#4556901pxsolid;POSITION:absolute;TOP:0px;HEIGHT:"+h+"px;BACKGROUND-COLOR:#c9d3f3'>"
str+="<TABLEstyle='BORDER-TOP:#ffffff1pxsolid;BORDER-LEFT:#ffffff1pxsolid'cellSpacing=0cellPadding=0width='100%'bgColor=#cfdef4border=0>"
str+="<TR>"
str+="<TDstyle='FONT-SIZE:12px;COLOR:#0f2c8c'width=30height=24></TD>"
str+="<TDstyle='PADDING-LEFT:4px;FONT-WEIGHT:normal;FONT-SIZE:12px;COLOR:#1f336b;PADDING-TOP:4px'vAlign=centerwidth='100%'>"+this.caption+"</TD>"
str+="<TDstyle='PADDING-RIGHT:2px;PADDING-TOP:2px'vAlign=centeralign=rightwidth=19>"
str+="<SPANtitle= 关闭style='FONT-WEIGHT:bold;FONT- SIZE:12px;CURSOR:hand;COLOR:red;MARGIN-RIGHT:4px'id='btSysClose'>×</SPAN></TD>"
str+="</TR>"
str+="<TR>"
str+="<TDstyle='PADDING-RIGHT:1px;PADDING-BOTTOM:1px'colSpan=3height="+(h-28)+">"
str+="<DIVstyle='BORDER-RIGHT:#b9c9ef1pxsolid;PADDING-RIGHT:8px;BORDER-TOP:#728eb81pxsolid;PADDING-LEFT:8px;FONT-SIZE:12px;PADDING-BOTTOM:8px;BORDER-LEFT:#728eb81pxsolid;WIDTH:100%;COLOR:#1f336b;PADDING-TOP:8px;BORDER-BOTTOM:#b9c9ef1pxsolid;HEIGHT:100%'>"+this.title+"<BR><BR>"
str+="<DIVstyle='WORD-BREAK:break-all'align=left><Ahref='javascript:void(0)'hidefocus=trueid='btCommand'><FONTcolor=#ff0000>"+this.message+"</FONT></A></DIV>"
str+="</DIV>"
str+="</TD>"
str+="</TR>"
str+="</TABLE>"
str+="</DIV>"
oPopup.document.body.innerHTML=str;
this.offset=0;
varme=this;
oPopup.document.body.onmouseover=function(){me.pause=true;}
oPopup.document.body.onmouseout=function(){me.pause=false;}
varfun=function(){
varx=me.left;
vary=0;
varwidth=me.width;
varheight=me.height;
if(me.offset>me.height){
height=me.height;
}else{
height=me.offset;
}
y=me.bottom-me.offset;
if(y<=me.top){
me.timeout--;
if(me.timeout==0){
window.clearInterval(me.timer);
if(me.autoHide){
me.hide();
}
}
}else{
me.offset=me.offset+me.step;
}
me.Pop.show(x,y,width,height);
}
this.timer=window.setInterval(fun,this.speed)
varbtClose=oPopup.document.getElementById("btSysClose");
btClose.onclick=function(){
me.close=true;
me.hide();
}
varbtCommand=oPopup.document.getElementById("btCommand");
btCommand.onclick=function(){
me.oncommand();
}
}
/**/ /*
**设置速度方法
**/
CLASS_MSN_MESSAGE.prototype.speed = function (s) {
vart=20;
try{
t=praseInt(s);
}catch(e){}
this.speed=t;
}
/**/ /*
**设置步长方法
**/
CLASS_MSN_MESSAGE.prototype.step = function (s) {
vart=1;
try{
t=praseInt(s);
}catch(e){}
this.step=t;
}
CLASS_MSN_MESSAGE.prototype.rect = function (left,right,top,bottom) {
try{
this.left=left!=null?left:this.right-this.width;
this.right=right!=null?right:this.left+this.width;
this.bottom=bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
this.top=top!=null?top:this.bottom-this.height;
}catch(e){}
}
var MSG1 = new CLASS_MSN_MESSAGE( " aa " , 200 , 120 , " 短消息提示: " , " 您有1封消息 " , " 今天请我吃饭哈 " );
MSG1.rect( null , null , null ,screen.height - 50 );
MSG1.speed = 10 ;
MSG1.step = 5 ;
// alert(MSG1.top);
MSG1.show();
// 同时两个有闪烁,只能用层代替了,不过层不跨框架
// varMSG2=newCLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊");
// MSG2.rect(100,null,null,screen.height);
// MSG2.show();
// -->
</ SCRIPT >
< METAcontent = " MSHTML6.00.2800.1106 " name = GENERATOR ></ HEAD >
< BODY ></ BODY ></ HTML >