javascript 实现QQ，MSN右下角的信息提示框效果

最新推荐文章于 2019-08-02 01:38:03 发布

w_gaoping

最新推荐文章于 2019-08-02 01:38:03 发布

阅读量114

点赞数

文章标签： QQ JavaScript DWR Ajax HTML ViewUI

本文链接：https://blog.csdn.net/w_gaoping/article/details/83369460

版权


<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>模仿MSN消息提示的效果</title>
<style type="text/css">
a {
	color: #000;
	font-size: 12px;
	text-decoration: none
}

a:hover {
	color: #900;
	text-decoration: underline
}

</style>

<!--实现层移动-->
<script language="javascript">
<!--

 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>5000) 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>

	</head>
	<body>
		<span><a href="#">显示提示信息</a></span>
	<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(images/msgTopBg.gif); COLOR: #0f2c8c" width=30 height=24 valign='middle'>
	                    <img src='images/msgLogo.gif' hspace='5' vspace='1'/>
	                </TD> 
	                <TD style="FONT-WEIGHT: bold; FONT-SIZE: 12px; BACKGROUND-IMAGE: url(images/msgTopBg.gif); COLOR: #1f336b; PADDING-TOP: 4px;PADDING-left: 4px" vAlign=middle width="100%"> 消息提醒</TD> 
	                <TD style="BACKGROUND-IMAGE: url(images/msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=middle align=right width=19><IMG title=关闭 style="CURSOR: hand" onclick=closeDiv() hspace=3 src="images/msgClose.gif" id="btSysClose"></TD> 
	            </TR> 
	            <TR> 
	                <TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(images/msgBottomBg.jpg);BACKGROUND-REPEAT:repeat-y;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%"><span id="tipMsg"></span> 
	                        <DIV align=center style="word-break:break-all" id="btCommand"></DIV >
	                    </DIV> 
	                </TD> 
	            </TR> 
	        </TBODY> 
	    </TABLE> 
	</DIV>
<script language="JavaScript" type="text/JavaScript">

function parseResults() {

			document.getElementById("tipMsg").innerHTML = "您有<font color='red'>1</font>条新短消息<BR><BR>";
	    document.getElementById("btCommand").innerHTML="<a href='#' onclick='closeDiv();'><font color=#FF0000>点击查看</font></a>";
	    closeDiv();
	    getMsg();
	    //setTimeout("closeDiv()",40000);

}
parseResults();
setInterval("parseResults()",3000);

</script>
</body>
</html>