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

最新推荐文章于 2015-01-13 20:53:18 发布

Senton

最新推荐文章于 2015-01-13 20:53:18 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： qq function javascript border table html

本文链接：https://blog.youkuaiyun.com/Senton/article/details/1513996

Web 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了一种使用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>