qq右下角信息提示框的实现

最新推荐文章于 2023-10-24 13:40:47 发布

guoguo19811025

最新推荐文章于 2023-10-24 13:40:47 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： qq border javascript

本文链接：https://blog.youkuaiyun.com/guoguo19811025/article/details/3321442

javascript 专栏收录该内容

13 篇文章

订阅专栏

最近想实现类似qq的右下角缓慢出现的信息提示框的实现，网上找还不好找，好不容易找了一个，用起来还不爽，其实现方法如下:

1. <html>
2. <head>
3. <title>qq信息提示框</title>
4. </head>
5. <body>
6. <SCRIPT>
7. var oPopup = window.createPopup();
8. var popTop=50;
9. function popmsg(msgstr){
10. var winstr="<table style=/"border: 1 solid #FFA6CA/" width=/"241/" height=/"172/" cellspacing=/"0/" id='a'>";
11. winstr+="<tr><td height=/"30/" bgcolor=/"#E0E0E0/">系统提示</td></tr><tr><td align=/"center/"><table width=/"90%/" height=/"110/" border=/"0/" cellspacing=/"0/">";
12. winstr+="<tr><td valign=/"top/" style=/"font-size:12px; face: Tahoma/">"+msgstr+"</td></tr></table></td></tr>";
13. winstr+="<tr><td style='height:25;font-size:10pt;' bgcolor=/"#E0E0E0/" align=center><span style='cursor:hand' onclick='a.style.display = /"none/";'>关闭窗口</span></td></tr>";
14. winstr+="</table>"
15. oPopup.document.body.innerHTML = winstr;
16. popshow();
17. }
18. function popshow(){
19. window.status=popTop;
20. if(popTop>1720){
21. clearTimeout(mytime);
22. oPopup.hide();
23. return;
24. }else if(popTop>1520&&popTop<1720){
25. oPopup.show(screen.width-250,screen.height,241,1720-popTop);
26. }else if(popTop>1500&&popTop<1520){
27. oPopup.show(screen.width-250,screen.height+(popTop-1720),241,172);
28. }else if(popTop<180){
29. oPopup.show(screen.width-250,screen.height,241,popTop);
30. }else if(popTop<220){
31. oPopup.show(screen.width-250,screen.height-popTop,241,172);
32. }
33. popTop+=10;
34. var mytime=setTimeout("popshow();",50);
35. }
36. popmsg("学生期中调查正在进行中，点击<a href='http://www.sina.com' onclick=/"parent.open(href)/">学生意见调查表</a>提出你的宝贵意见");
37. </SCRIPT>
39. </body>
40. </html>
这个方法的缺陷在于提示框的出现和关闭是通过setTimeout函数控制的，手工控制很不方便，该实现方法是基于POP窗体来实现的，当页面加载提示框出现的时候，你一点鼠标提示框框就没有了，郁闷的是过一段时间又出现了并逐渐退去，所以就想自己动手来实现一个，完全手动来控制，找了很多关于层的操作，终于搞定了，所以博一把，与大家共享！代码如下
<body>
<div style="position:absolute;width:200;height:140;border:1 solid black;background:#cccccc;font-size:9pt;display:none;overflow:hidden;filter:alpha(opacity=80)" id="MailObjBox">
<div style="font-size:10pt;line-height:150%;height:20;border-bottom:1 solid #000;font-weight:bold;">信息提示</div>
<div style="width:100%;height:100" id="MailObj"></div>
<div style="font-size:10pt;height:20;line-height:150%;border-top:1 solid #000;font-weight:bold;text-align:center;padding:0 0 5 0"><a href="javascript:Close()" style="color:black;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';">关闭窗口</a></div>
</div>
<script language="JScript">
i = 0;
t = 0;
function ObjOver(obj,even){
MailObjBox.style.display="";
MailObj.innerHTML=obj;
MailObjBox.style.left = document.body.clientWidth-MailObjBox.clientWidth-10;
MailObjBox.style.top = document.body.clientHeight-5;
t = MailObjBox.style.top.replace("px","");
ChS();
}
function ChS(){
if(i<140){
MailObjBox.style.top = t--;
i++;
setTimeout("ChS()",5);
}
}
function Close(){
MailObjBox.style.display='none';
}
ObjOver("hello world",MailObjBox);
</script>