类似msn的提示效果代码系列一:简单的脚本提示

本文介绍了一种在用户登录时显示酷炫提示消息的方法。通过JavaScript实现了一个浮动且随窗口大小调整位置的提示框,该提示框可以显示简单的短消息通知。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这些天做的一个项目,要求根据业务的逻辑,在某些特定的用户登录系统时,给出一个特定的消息提示,于是想到在有的网站看到的类似msn的提示效果,觉得挺酷的,于是决定也采用这种提示效果。

在网上找到很多有关实现类似效果的文章和代码,我也选了其中的一篇。虽然没有完全能实现我的需求,但是对于简单的内容不变化的提示,还是有比较好的效果,给了我一定的启发,使我最终实现了需求。现将代码贴在这里:

<html>
<head>
<script   language="javascript">
window.onload   
=   getMsg;
window.onresize   
=   resizeDiv;
window.onerror   
=   function(){}

var   divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i   =   0;
function   getMsg()
{
try{
divTop   
=   parseInt(document.getElementById("eMeng").style.top,10)
divLeft   
=   parseInt(document.getElementById("eMeng").style.left,10)
divHeight   
=   parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth   
=   parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth   
=   document.body.clientWidth;
docHeight   
=   document.body.clientHeight;
document.getElementById(
"eMeng").style.top   =   parseInt(document.body.scrollTop,10)   +   docHeight   +   10;//   divHeight
document.getElementById("eMeng").style.left   =   parseInt(document.body.scrollLeft,10)   +   docWidth   -   divWidth
document.getElementById(
"eMeng").style.visibility="visible"
objTimer   
=   window.setInterval("moveDiv()",10)
}

catch(e){}
}
   

function   resizeDiv()
{
i
+=1
if(i>500)   closeDiv()
try{
divHeight   
=   parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth   
=   parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth   
=   document.body.clientWidth;
docHeight   
=   document.body.clientHeight;
document.getElementById(
"eMeng").style.top   =   docHeight   -   divHeight   +   parseInt(document.body.scrollTop,10)
document.getElementById(
"eMeng").style.left   =   docWidth   -   divWidth   +   parseInt(document.body.scrollLeft,10)
}

catch(e){}
}


function   moveDiv()
{
try
{
if(parseInt(document.getElementById("eMeng").style.top,10)   <=   (docHeight   -   divHeight   +   parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer)
objTimer   
=   window.setInterval("resizeDiv()",1)
}

divTop   
=   parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById(
"eMeng").style.top   =   divTop   -   1
}

catch(e){}
}

function   closeDiv()
{
document.getElementById(
'eMeng').style.visibility='hidden';
if(objTimer)   window.clearInterval(objTimer)
}

</script>
</head>

<body>
<DIV   id=eMeng   style="BORDER-RIGHT:   #455690   1px   solid;   BORDER-TOP:   #a6b4cf   1px   solid;   Z-INDEX:99999;   LEFT:   0px;   VISIBILITY:   hidden;   BORDER-LEFT:   #a6b4cf   1px   solid;   WIDTH:   180px;   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"   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="FONT-WEIGHT:   normal;   FONT-SIZE:   12px;   BACKGROUND-IMAGE:   url(msgTopBg.gif);   COLOR:   #1f336b;   PADDING-TOP:   4px;PADDING-left:   4px"   vAlign=center   width="100%">   短消息提示:</TD>
<TD   style="BACKGROUND-IMAGE:   url(msgTopBg.gif);   PADDING-TOP:   2px;PADDING-right:2px"   vAlign=center   align=right   width=19><span   title=关闭   style="CURSOR:   hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;"   onclick=closeDiv()   >×</span>
</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%">您有<font   color=#FF0000>1</font>封新短消息<BR><BR>
<DIV   align=center   style="word-break:break-all"><a   href="javascript:alert('你好')"><font   color=#FF0000>点击查看短信</font></a></DIV>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>

</body>
</html>

类似的大同小异的代码,在网上广为流传,最初的作者也不得而知。在此我只能感谢他的智慧和无私奉献!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值