JS弹出短消息窗口

最新推荐文章于 2024-04-13 16:25:52 发布

原创最新推荐文章于 2024-04-13 16:25:52 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #border #table #html #jsp

本文介绍了一种使用HTML和JavaScript实现类似QQ消息提示框的效果。该提示框具备自动显示和隐藏的功能，并能根据浏览器窗口大小调整位置。通过设置定时器和监听窗口调整事件来实现平滑移动和定位。

<html>
<head>
<META name="keywords" content="网页特效,js,html,javascript,asp,php,jsp,源代码,模仿QQ消息提示框">
<title>提示框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{
font-size:12px;
}
td{
font-size:12px;
}
</style>
<SCRIPT language=javascript>
//more javascript from http://www.smallrain.net
window.onload = enetgetMsg;
window.onresize = enetresizeDiv;
window.onerror = function(){}
var enetdivTop,enetdivLeft,enetdivWidth,enetdivHeight,enetdocHeight,enetdocWidth,enetobjTimer,i = 0;
function enetgetMsg()
{
try{
enetdivTop = parseInt(document.getElementById("enetMeng").style.top,10)
enetdivLeft = parseInt(document.getElementById("enetMeng").style.left,10)
enetdivHeight = parseInt(document.getElementById("enetMeng").offsetHeight,10)
enetdivWidth = parseInt(document.getElementById("enetMeng").offsetWidth,10)
enetdocWidth = document.body.clientWidth;
enetdocHeight = document.body.clientHeight;
document.getElementById("enetMeng").style.top = parseInt(document.body.scrollTop,10) + enetdocHeight + 10;// enetdivHeight
document.getElementById("enetMeng").style.left = parseInt(document.body.scrollLeft,10) + enetdocWidth - enetdivWidth
document.getElementById("enetMeng").style.visibility="visible"
enetobjTimer = window.setInterval("enetmoveDiv()",10)
}
catch(e){}
}
　
function enetresizeDiv()
{
i+=1
if(i>600) enetcloseDiv()
try{
enetdivHeight = parseInt(document.getElementById("enetMeng").offsetHeight,10)
enetdivWidth = parseInt(document.getElementById("enetMeng").offsetWidth,10)
enetdocWidth = document.body.clientWidth;
enetdocHeight = document.body.clientHeight;
document.getElementById("enetMeng").style.top = enetdocHeight - enetdivHeight + parseInt(document.body.scrollTop,10)
document.getElementById("enetMeng").style.left = enetdocWidth - enetdivWidth + parseInt(document.body.scrollLeft,10)
}
catch(e){}
}
function enetmoveDiv()
{
try
{
if(parseInt(document.getElementById("enetMeng").style.top,10) <= (enetdocHeight - enetdivHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(enetobjTimer)
enetobjTimer = window.setInterval("enetresizeDiv()",1)
}
enetdivTop = parseInt(document.getElementById("enetMeng").style.top,10)
document.getElementById("enetMeng").style.top = enetdivTop - 1
}
catch(e){}
}
function enetcloseDiv()
{
document.getElementById('enetMeng').style.visibility='hidden';
if(enetobjTimer) window.clearInterval(enetobjTimer)
}
</SCRIPT>
</head>
<body>
<DIV id=enetMeng
style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; VISIBILITY: visible; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 241px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: -200px; HEIGHT: 157px">
<TABLE WIDTH=255 BORDER=0 CELLPADDING=0 CELLSPACING=0 bgcolor="#DAE6FC">
<TR>
<TD height="30" valign="top" background="qqimages/heihei_1.jpg">
<table width="255" height="19" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="212" valign="bottom"><strong><font size="2">　<font color="#FF6600">消息框</font></font></strong></td>
<td width="43" style="cursor:hand" onClick="enetcloseDiv()"> </td>
</tr>
</table> </TD>
</TR>
<TR>
<TD height="122" background="qqimages/heihei_2.jpg" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td width="95%"><table align="center" width="98%"><tr><td>
<a href=" www.16bao.com">欢迎你来到一路宝时尚网 www.16bao.com</a></td><tr></table></td>
</tr>
</table> </TD>
</TR>
<TR>
<TD>
<IMG SRC="qqimages/heihei_3.gif" WIDTH=255 HEIGHT=7 ALT=""></TD>
</TR>
</TABLE></div>
</body>
</html>