仿QQ页面右侧底部弹出消息窗口

最新推荐文章于 2022-06-06 06:00:00 发布

yaoshanghuan

最新推荐文章于 2022-06-06 06:00:00 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签： qq border function c

本文链接：https://blog.csdn.net/yaoshanghuan/article/details/5016924

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了两种创建类似QQ页面右侧底部弹出消息窗口的方法。方法一是利用JavaScript的createPopup()函数，自动收回；方法二是通过监听窗口加载、调整大小和错误事件，动态调整DIV的位置。代码示例详细展示了实现过程。

摘要由CSDN通过智能技术生成

方法一：

在《body》里加入下面代码：

<SCRIPT>
var oPopup = window.createPopup();
var popTop=50;
function popmsg(msgstr){
var winstr="<table style=/"border: 1 solid #6D93C8/" width=/"241/" height=/"172/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" >";
winstr+="<tr><td height=/"30/"> </td></tr><tr><td align=/"center/"><table width=/"90%/" height=/"110/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
winstr+="<tr><td valign=/"top/" style=/"font-size:12px; color: #6D93C8; face: Tahoma/">"+msgstr+"</td></tr></table></td></tr></table>";
oPopup.document.body.innerHTML = winstr;
popshow();
}
function popshow(){
window.status=popTop;
if(popTop>1720){
clearTimeout(mytime);
oPopup.hide();
return;
}else if(popTop>1520&&popTop<1720){
oPopup.show(screen.width-250,screen.height,241,1720-popTop);
}else if(popTop>1500&&popTop<1520){
oPopup.show(screen.width-250,screen.height+(popTop-1720),241,172);
}else if(popTop<180){
oPopup.show(screen.width-250,screen.height,241,popTop);
}else if(popTop<220){
oPopup.show(screen.width-250,screen.height-popTop,241,172);
}
popTop+=10;
var mytime=setTimeout("popshow();",50);
}
popmsg("小雨在线友情提示,注意保护眼睛");
</SCRIPT>

说明：此方法弹出没有关闭，会自动收回，var mytime=setTimeout("popshow();",50);这里是时间设置。

方法二：

<dead>里加入下面代码：

<SCRIPT language=javascript>
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>