当前位置: 代码迷 >> JavaScript >> js 银幕右下角弹出消息(只支持IE)
  详细解决方案

js 银幕右下角弹出消息(只支持IE)

热度:79   发布时间:2013-04-12 18:33:12.0
js 屏幕右下角弹出消息(只支持IE)

<!-- ?

??

/**//* ?

** ? ?================================================================================================== ?

** ? ?类名:CLASS_MSN_MESSAGE ?

** ? ?功能:提供类似MSN消息框 ?

** ? ?示例: ?

? ? --------------------------------------------------------------- ?

??

* ? ?消息构造 ?

*/ ?

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:180; ?

? ? 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()){ ?

? ? ? ? var offset ?= this.height>this.bottom-this.top?this.height:this.bottom-this.top;?

? ? ? ? var me ?= this; ?

? ? ? ? if(this.timer>0){ ??

? ? ? ? ? ? window.clearInterval(me.timer); ?

? ? ? ? } ?

? ? ? ? var fun = function(){ ?

? ? ? ? ? ? if(me.pause==false||me.close){

? ? ? ? ? ? ? ? var x ?= me.left;?

? ? ? ? ? ? ? ? var y ?= 0;?

? ? ? ? ? ? ? ? var width = me.width;?

? ? ? ? ? ? ? ? var height = 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() { ?

? ? return true; ?

} ?

/**//* ?

* ? ?消息命令事件,要实现自己的连接,请重写它 ?

* ?

*/ ?

CLASS_MSN_MESSAGE.prototype.oncommand = function(){ ?

? ? //this.close = true;

? ? this.hide(); ?

?window.open("");

? ?

}?

/**//* ?

* ? ?消息显示方法 ?

*/ ?

CLASS_MSN_MESSAGE.prototype.show = function(){ ?

? ? var oPopup = window.createPopup(); //IE5.5+ ?

? ??

? ? this.Pop = oPopup; ?

??

? ? var w = this.width; ?

? ? var h = this.height; ?

??

? ? 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'>" ?

? ? ? ? str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>" ?

? ? ? ? str += "<TR>" ?

? ? ? ? str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>" ?

? ? ? ? str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>" ?

? ? ? ? str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>" ?

? ? ? ? str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>" ?

? ? ? ? str += "</TR>" ?

? ? ? ? str += "<TR>" ?

? ? ? ? str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">" ?

? ? ? ? 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>" ?

? ? ? ? str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=false id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A><br/><br/><A href='http://weibo.com/1648732391/' hidefocus=false id='ommand'><FONT color=#ff0000>微博:@_米二:</FONT></A></DIV>" ?

? ? ? ? str += "</DIV>" ?

? ? ? ? str += "</TD>" ?

? ? ? ? str += "</TR>" ?

? ? ? ? str += "</TABLE>" ?

? ? ? ? str += "</DIV>" ?

??

? ? oPopup.document.body.innerHTML = str;?

? ??

??

? ? this.offset ?= 0;?

? ? var me ?= this; ?

? ? oPopup.document.body.onmouseover = function(){me.pause=true;}

? ? oPopup.document.body.onmouseout = function(){me.pause=false;}

? ? var fun = function(){ ?

? ? ? ? var x ?= me.left;?

? ? ? ? var y ?= 0;?

? ? ? ? var width ? ?= me.width;?

? ? ? ? var height ? ?= 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) ? ? ?

??

? ? ?

??

? ? var btClose = oPopup.document.getElementById("btSysClose"); ?

??

? ? btClose.onclick = function(){ ?

? ? ? ? me.close = true;

? ? ? ? me.hide(); ?

? ? } ?

??

? ? var btCommand = oPopup.document.getElementById("btCommand"); ?

? ? btCommand.onclick = function(){ ?

? ? ? ? me.oncommand(); ?

? ? } ? ?

? var ommand = oPopup.document.getElementById("ommand"); ?

? ? ? ommand.onclick = function(){ ?

? ? ? ?//this.close = true;

? ? me.hide(); ?

?window.open(ommand.href);

? ? } ??

} ?

/**//*?

** 设置速度方法?

**/?

CLASS_MSN_MESSAGE.prototype.speed = function(s){?

? ? var t = 20;?

? ? try {?

? ? ? ? t = praseInt(s);?

? ? } catch(e){}?

? ? this.speed = t;?

}?

/**//*?

** 设置步长方法?

**/?

CLASS_MSN_MESSAGE.prototype.step = function(s){?

? ? var t = 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",250,180,"短消息提示:","您有1封消息","欢迎关注微博@_米二!如果您喜欢,可以转发给您的好朋友!"); ?

? ? MSG1.rect(null,null,null,screen.height-80);?

//停留时间

MSG1.speed ? ?= 50;?

//淡出速度

? ? MSG1.step ? ?= 5;?

? ? //alert(MSG1.top);?

? ? MSG1.show(); ?

//同时两个有闪烁,只能用层代替了,不过层不跨框架?

//var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示:","您有2封消息","好的啊"); ?

// ? MSG2.rect(100,null,null,screen.height-80);?

// ? ?MSG2.show(); ?

//--> ?

</SCRIPT>

  相关解决方案