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

这些天做的一个项目，要求根据业务的逻辑，在某些特定的用户登录系统时，给出一个特定的消息提示，于是想到在有的网站看到的类似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 >

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