仿msn弹出

本文介绍了一个使用JavaScript实现的弹窗效果,包括弹窗的渐显渐隐过程以及响应鼠标操作的功能。该弹窗具备基本的消息展示功能,并能根据用户操作进行相应的反馈。
<script language="javascript" type="text/javascript">

   
        
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>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值