MSN消息提示类(II)

http://ttyp.cnblogs.com/archive/2005/03/18/121106.html

• 纯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 >