模仿QQ弹出窗口的源代码(推荐)

最新推荐文章于 2022-07-28 15:58:22 发布

iteye_12869

最新推荐文章于 2022-07-28 15:58:22 发布

阅读量114

点赞数

文章标签： QQ JavaScript HTML ViewUI

本文介绍了一种使用HTML和JavaScript实现浮动消息框的方法。通过调整位置和可见性，确保了消息框始终显示在用户界面上，即使在窗口大小改变时也能自动调整位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>
<SCRIPT language=javascript>
//more javascript from http://www.webjx.com
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;
// enetdivHeight
document.getElementById("enetMeng").style.top = parseInt(document.body.scrollTop,10) + enetdocHeight + 10;
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 color="#FF6600" size="2">消息框</font></strong>
</td>
<td width="10" style="cursor:hand" onClick="enetcloseDiv()">
close
</td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD height="122" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1">
<table align="center" width="98%">
<tr>
<td>
欢迎你来到网页教学网 http://www.webjx.com
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
</DIV>
</body>
</html>