您的位置：首页 > Web前端 > JavaScript

JavaScript实现类似QQ、MSN消息提示的效果(转载）

2008-06-20 17:16 1061 查看

[align=center]JavaScript实现类似QQ、MSN消息提示的效果(转载）[/align]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.6000.16640" name=GENERATOR></HEAD>
<BODY>
<DIV id=liyunetbbstip
style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 200px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
<TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid"
height="100%" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4
border=0><TBODY>
<TR>
<TD
style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c"
width=30 height=24></TD>
<TD
style="PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px"
vAlign=center width="100%">短消息提示（一）：</TD>
<TD
style="PADDING-RIGHT: 2px; BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px"
vAlign=center align=right width=19><SPAN title=关闭
style="FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px"
onclick=mt1.close=true;mt1.hide();>×</SPAN></TD></TR>
<TR>
<TD
style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px"
colSpan=3 height=90>
<DIV
style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">论坛新增加功能：<BR><BR>
<DIV style="WORD-BREAK: break-all" align=center><FONT
color=#ff0000><a href="#" onclick="openw()">你有新的通知</a>

</FONT></DIV></DIV></TD></TR></TBODY></TABLE></DIV>
<SCRIPT language=javascript>
/////////////////////////////////////////////////////
// 鲤鱼论坛 - http://LiyuNet.Com/bbs
// 2007-05-01
// EZERG liyunet@yeah.net
/////////////////////////////////////////////////////
document.body.scroll='no';
function $(n){
return document.getElementById(n);
}
function $i(i){
try{
return parseInt(i);
}catch(ex){
return 0;
}
}
function MessageTip(id)
{
//显示ID
this.id = id;
this.obj = $(id);
//显示位置
this.divTop = $i(this.obj.style.top);
this.divLeft = $i(this.obj.style.left);
this.divHeight = this.obj.offsetHeight;
this.divWidth = this.obj.offsetWidth;
this.docWidth = document.body.clientWidth;
this.docHeight = document.body.clientHeight;
//内部属性
this.timeout= 150;
this.speed = 30;
this.step = 3;
this.timer = 0;
this.pause = false;
this.close = false;
this.autoClose = true;
//记录提示
this.add(this);
}
MessageTip.prototype.tips = new Array();
MessageTip.prototype.add = function(mt)
{
this.tips.push(mt);
}
MessageTip.prototype.show = function()
{
if(this.onload()){
var me = this;
var mess = this.obj;
mess.onmouseover = function(){me.pause=true;};
mess.onmouseout = function(){me.pause=false;};
mess.style.top = $i(document.body.scrollTop) + this.docHeight + 10;
mess.style.left = $i(document.body.scrollLeft) + this.docWidth - this.divWidth;
mess.style.visibility = 'visible';
var moveUp = function()
{
var tHeight = me.divHeight;
var t = me.tips;
for(var i=0; i<t.length; i++){
var tt = t[i];
if(tt==me){
break;
}else{
tHeight += tt.divHeight + 3;
}
}
if($i(mess.style.top) <= (me.docHeight - tHeight + $i(document.body.scrollTop))){
me.timeout--;
if(me.timeout==0){
window.clearInterval(me.timer);
if(me.autoClose){
me.hide();
}
}
} else {
mess.style.top = $i(mess.style.top) - me.step;
}
}
this.timer = window.setInterval(moveUp,this.speed);
}
}
MessageTip.prototype.hide = function()
{
if(this.onunload()){
var me = this;
var mess = this.obj;
if(this.timer>0){
window.clearInterval(me.timer);
}
var moveDown = function()
{
if(me.pause==false || me.close){
if($i(mess.style.top) >= ($i(document.body.scrollTop) + me.docHeight + 10)){
window.clearInterval(me.timer);
mess.style.visibility='hidden';
} else {
mess.style.top = $i(mess.style.top) + me.step;
}
}
}
this.timer = window.setInterval(moveDown,this.speed);
}
}
MessageTip.prototype.resize = function()
{
this.divHeight = $(this.id).offsetHeight;
this.divWidth = $(this.id).offsetWidth;
this.docWidth = document.body.clientWidth;
this.docHeight = document.body.clientHeight;
$(this.id).style.top = this.docHeight - this.divHeight + document.body.scrollTop;
$(this.id).style.left = this.docWidth - this.divWidth + document.body.scrollLeft;
}
MessageTip.prototype.onload = function()
{
return true;
}
MessageTip.prototype.onunload = function()
{
return true;
}
//use
var mt1 = new MessageTip('liyunetbbstip');mt1.show();

function openw()
{
window.open("bb.htm");
}
</SCRIPT>
</BODY></HTML>

在线演示页面：http://www.liyunet.com/download/messagetip.html
效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航