用JavaScript實作類別MSN資訊提示

   由於需要在系統中實現立即訊息提示，參考了其它人寫的代碼，形成了下面的用JavaScript實作類別MSN資訊提示視窗。

   <script language="javascript" type="text/javascript">

   
<!--

       /*
           **    作者：劉帝勇
           **    日期：2007-11-08
          */

       
var
oPopup;

       
var
iOriginTop
= 50;

       
var
iPopTop
= iOriginTop;

       
var
iWidth
= 241;

       
var
iHeight
= 172;

       
var
iTimer
= 0;

       
var
iStep
= 10;

       
var
iSpeed
= 50;

       
var
bPause
= false;       

       
//初始化

       
function
IniPopup()

       
{  

           
//

           
oPopup = window.createPopup();

           
//

           
var
winstr="<table  id=\"tbMsg\"
style=\"BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
solid\" 
bgColor=\"#cfdef4\"
width=\"" + iWidth +"\" height=\"" + iHeight +
"\"
border=\"0\"
cellpadding=\"2\"
cellspacing=\"2\">";

           
winstr+="<tr ><td height=\"30\"
align=\"left\" 
style='FONT-WEIGHT:
bold; FONT-SIZE: 12px; COLOR: #003399; MARGIN-RIGHT:
4px' 
id=\"tdCaption\"></td><td
align=\"right\"><SPAN
title=關閉
style='FONT-WEIGHT:
bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red;
MARGIN-RIGHT:
4px' id='btClose'>×</SPAN></td></tr>";

           
winstr+="<tr><td align=\"center\"
colspan=\"2\">";

           
winstr+="<table width=\"90%\"
height=\"110\"
border=\"0\" cellpadding=\"0\"
cellspacing=\"0\">";

           
winstr+="<tr><td valign=\"top\"
style=\"font-size:12px;
color: #003399; face: Tahoma;PADDING-RIGHT:
1px;PADDING-BOTTOM:
1px;\"
id=\"tdContent\"></td></tr>";

           
winstr+="</table>";

           
winstr+="</td></tr></table>";

           
//

           
oPopup.document.body.innerHTML
= winstr; 

           
oPopup.document.body.onmouseover
= function(){bPause
=
true;}

           
oPopup.document.body.onmouseout
= function(){bPause
=
false;}  

           
//

           
oPopup.document.body.onclick
= function()

           
{

               
var
src  =
oPopup.document.parentWindow.event.srcElement;

               
var sid =
src.getAttribute("id");

               
if(sid ==
"btClose"
)

               
{

      
             HideMsg();

               
}

               
else

               
{

                   
//顯示快顯視窗中的聯機地址

                   
var url =
src.getAttribute("href");

                   
if(url!=null)

                   
{

                       
window.open(url);

                       
HideMsg();

                   
}

               
}

           
}

       
}

       
//彈出訊息框

       
function
PopMsg(captionstr,msgstr)

       
{         

           
oPopup.document.getElementById("tdCaption").innerHTML =
captionstr;

           
oPopup.document.getElementById("tdContent").innerHTML
=
msgstr;

           
iTimer =
window.setInterval("PopupShow()",iSpeed);

       
}

       
//漸次顯示...

       
function
PopupShow()

       
{

           
if(bPause)
return;

           

           
if(iPopTop>1720)

           
{

               
HideMsg();

               
return;

           
}

           
else
if(iPopTop > 1520
&&
iPopTop<1720)

           
{

               
oPopup.show(screen.width
- iWidth - 10,screen.height,iWidth,1720 -
iPopTop);

           
}

           
else
if(iPopTop > 1500
&&
iPopTop<1520)

           
{

               
oPopup.show(screen.width
- iWidth - 10,screen.height + (iPopTop -
1720),iWidth,iHeight);

           
}

            else if(iPopTop<(iHeight -
10))

           
{

               
oPopup.show(screen.width
- iWidth -
10,screen.height,iWidth,iPopTop);

           
}

           
else
if(iPopTop<(iWidth -
20))

           
{

               
oPopup.show(screen.width
- iWidth - 10,screen.height -
iPopTop,iWidth,iHeight);

           
}

           
iPopTop += iStep;

       
}

       
//隱藏訊息

       
function
HideMsg()

       
{

           
if(oPopup!=null) 

           
{

               
window.clearInterval(iTimer);

               
oPopup.hide();

               
iPopTop =
iOriginTop;

               
bPause = false;

           
}

       
}

       
//為調用使用

       
function
ShowMsg()

       
{

           
PopMsg("您有2條新的短訊息","<li>新郵件<li><a
href=http://news.sina.com.cn>新工作</a>");

       
}

       
IniPopup();

       
//ShowMsg();

       
window.setInterval("ShowMsg()",10000);

       

    //-->

    </script>