类似MSN弹出框的JavaScript代码

最新推荐文章于 2024-08-22 14:32:34 发布

much0726

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量693

点赞数

分类专栏： JavaScript 文章标签： javascript url border function div .net

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

收藏一个网页弹MSN框的JS代码:

 
 <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="Keywords" content="51windows.Net"> 
<META NAME="Author" CONTENT="haiwa"> 
<title>类似MSN提示的页面效果 </title> 
</head> 
<body scroll=no> 
看到右下角的提示了吗？如果没有看到， <button οnclick=location.reload();>刷新 </button>一下 
<script language="JavaScript"> 
window.onload = getMsg; 
window.onresize = resizeDiv; 
window.onerror = function(){} 
//短信提示使用(asilas添加)  
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; 
function getMsg() 
{ 
  try{ 
  divTop = parseInt(document.getElementById("eMeng").style.top,10) 
  divLeft = parseInt(document.getElementById("eMeng").style.left,10) 
  divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) 
  divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) 
  docWidth = document.body.clientWidth; 
  docHeight = document.body.clientHeight; 
  document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight  
  document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth 
  document.getElementById("eMeng").style.visibility="visible" 
  objTimer = window.setInterval("moveDiv()",10) 
  } 
  catch(e){} 
} 
function resizeDiv() 
{ 
  i+=1 
  if(i>500) closeDiv() 
  try{ 
  divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10) 
  divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10) 
  docWidth = document.body.clientWidth; 
  docHeight = document.body.clientHeight; 
  document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10) 
  document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10) 
  } 
  catch(e){} 
} 
function moveDiv() 
{ 
  try 
  { 
  if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10))) 
  { 
  window.clearInterval(objTimer) 
  objTimer = window.setInterval("resizeDiv()",1) 
  } 
  divTop = parseInt(document.getElementById("eMeng").style.top,10) 
  document.getElementById("eMeng").style.top = divTop - 1 
  } 
  catch(e){} 
} 
function closeDiv() 
{ 
  document.getElementById('eMeng').style.visibility='hidden'; 
  if(objTimer) window.clearInterval(objTimer) 
} 
</script> 
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3"> 
  <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0> 
  <TBODY> 
    <TR> 
      <TD style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24> </TD> 
      <TD style="FONT-WEIGHT: normal; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=center width="100%"> 短消息提示： </TD> 
      <TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19> <span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" οnclick=closeDiv() >× </span> <!-- <IMG title=关闭 style="CURSOR: hand" οnclick=closeDiv() hspace=3 src="msgClose.jpg"> --> </TD> 
    </TR> 
    <TR> 
      <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=3 height=90> 
        <DIV style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 12px; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">您有 <font color=#FF0000>1 </font>封新短消息 <BR> <BR> 
        <DIV align=center style="word-break:break-all"> <a href="javascript:alert('你好')"> <font color=#FF0000>点击查看短信 </font> </a> </DIV 
        </DIV> 
      </TD> 
    </TR> 
  </TBODY> 
  </TABLE> 
</DIV> 
</body> 
</html> 
 

使用心得

在使用了一次上面这段摘抄过来的代码后,发现有他的CloseDiv方法太简单,效果不统一,所以我做了如下修改:

 
 function closeDiv() 
{          
   if(objTimer) window.clearInterval(objTimer)  //关闭后就不要调整DIV了 
   try 
   {          
     if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight + parseInt(document.documentElement.scrollTop,10))) 
     { 
       divTop = parseInt(document.getElementById("eMeng").style.top,10) 
       document.getElementById("eMeng").style.top = divTop + 1 
       //objTimer = window.setInterval("closeDiv()",10)  
       setTimeout("closeDiv()",10);  //加上这个就可以弹走了 
     } 
     else
     {
       document.getElementById('eMeng').style.visibility='hidden'; 
       document.getElementById('eMeng').style.top = docHeight - divHeight;            
     }                    
    } 
    catch(e){}           
}
    
 

还有一个问题,在.NET中使用document.body.clientHeight时,值不是当前页面的可视高度,可以做下修改:

document.body.clientWidth-> document.documentElement.clientWidth
document.body.clientHeight -> document.documentElement.clientHeight

这个例子在传入参数和DIV的控制性上还可以优化.等相关应用尝试后在修改吧.

much0726

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
类似MSN弹出框的JavaScript代码

收藏一个网页弹MSN框的JS代码: "Content-Type" content="text/html; charset=gb2312"> "Keywords" content="51windows.Net"> "Author" CONTENT="haiwa"> 类似MSN提示的页面效果看到右下角的提示了吗？如果没有看到，刷新一下
复制链接

扫一扫

专栏目录