<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>
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>
本文介绍了一个使用JavaScript实现的弹窗效果,包括弹窗的渐显渐隐过程以及响应鼠标操作的功能。该弹窗具备基本的消息展示功能,并能根据用户操作进行相应的反馈。

被折叠的 条评论
为什么被折叠?



