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

最新推荐文章于 2019-07-24 23:35:50 发布

zhaoyutong

最新推荐文章于 2019-07-24 23:35:50 发布

阅读量656

点赞数

分类专栏： Javascript 文章标签： javascript qq function url html border

本文链接：https://blog.csdn.net/zhaoyutong/article/details/2569978

版权

Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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" οnclick=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="#" οnclick="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 效果图

zhaoyutong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现类似QQ、MSN消息提示的效果(转载）

JavaScript实现类似QQ、MSN消息提示的效果(转载） <DIV id=liyunetbbstip style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf
复制链接

扫一扫

专栏目录