求一个类似于MSN消息弹出效果的JS脚本

http://blog.csdn.net/Eray/archive/2007/06/18/1656489.aspx

解决方案 »

  1.   

    <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 width=2000>
    <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;" onclick=closeDiv() >&#215;</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=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="http://www.google.com"><font color=#FF0000>google</font></a></DIV>
    </DIV> 
    </TD> 
    </TR> 
    </TBODY> 
    </TABLE> 
    </DIV> </body> 
    </html>
      

  2.   

    MSN:[email protected]!发个邮件给我 我发给你！就一张页面一个JS
      

  3.   

    var Message = new Object();
    Message.IsDraw = false;
    Message.Max = 100;
    Message.Top = -100;
    Message.Step = 2;
    Message.IsDown = true;
    Message.IsComplete = false;
    Message.Timer = 0;
    Message.Last = 0;
    Message.Current = null;
    Message.ValidationForm = null;
    var specialCharacters_pattern="^([^\,^\;^\"^\'^\/^\>^\<])*$";
    Message.Move = function()
    {
    if(Message.IsDraw)
    {
    if((!Message.IsDown && Message.Top > -Message.Max) || (Message.IsDown && Message.Top < 0))
    {
    var nStep = Message.IsDown ? Message.Step:-Message.Step;
    Message.Top += nStep;
    MessageLayer.style.top = window.document.body.scrollTop + Message.Top;
    }
    else
    {
    clearInterval(Message.Timer);
    Message.IsComplete = true;

    // check is down
    if(Message.IsDown)
    {
    clearTimeout(Message.Last);
    Message.Last = setTimeout('Message.Close(1)', 20000);
    }
    }
    }
    }Message.Fix = function()
    {
    if(Message.IsDraw && Message.IsComplete)
    {
    MessageLayer.style.top = window.document.body.scrollTop + Message.Top;
    }
    }Message.Close = function(nType)
    {
    clearInterval(Message.Timer);
    Message.IsDown = false;
    Message.IsComplete = false;
    Message.Timer = setInterval(Message.Move, 10);

    // set focus
    if(nType == undefined || nType != 1)
    {
    try { Message.Current.select(); }
    catch(e) {}
    }
    }Message.Show = function(sTitle, sMessage)
    {
    sTitle = unescape(sTitle);
    sMessage = unescape(sMessage);
    ///////////////////////////////////////
    if(sMessage.length > 100)
    {
            Message.Top = -sMessage.length;
            Message.Max = sMessage.length;
        }
        ///////////////////////////////////////
    if(Message.IsDraw)
    {
    MessageTitle.innerHTML = "<span><font color=\"#FF0000\"><b>" + sTitle + "</b></font>";
    MessageContent.innerHTML = sMessage;

    // start
    clearInterval(Message.Timer);
    Message.IsDown = true;
    Message.IsComplete = false;
    Message.Current = null;
    Message.Timer = setInterval(Message.Move, 10);
    }
    }Message.Draw = function()
    {
    document.write(""
    + "<div id=\"MessageLayer\" width=\"100%\" style=\"Z-INDEX: 101; LEFT: 0px; POSITION: absolute; TOP: -150px\">"
    + "<table border=\"1\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\" bordercolor=\"#000000\" style=\"background-image:url(/images/message/bg.gif);background-repeat: repeat-x;background-color:white;background-position: bottom;\">"
    + "<tr>"
    + "<td>"
    + "<table border=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\">"
    + "<tr>"
    + "<td width=\"200\" style=\"padding:5;padding-left:10;\" id=\"MessageTitle\" height=\"29\"><span><font color=\"#FF0000\"><b></b></font></span></td>"
    + "<td align=\"right\" style=\"padding-right:10;\"><a href=\"javascript:\" onclick=\"Message.Close()\"><img src=\"/images/message/close.gif\" border=\"0\">"
    + "</a></td>"
    + "</tr>"
    + "<tr>"
    + "<td id=\"MessageContent\" colspan=\"2\" style=\"padding-left:15;padding-right:10;padding-bottom:10;;word-break:break-all\" height=\"29\"></td>"
    + "</tr>"
    + "</table>"
    + "</td>"
    + "</tr>"
    + "</table>"
    + "<table border=\"0\" cellpadding=\"0\" style=\"border-collapse: collapse\" width=\"100%\">"
    + "<tr><td colspan=\"2\" bgcolor=\"#808080\"></td></tr>"
    + "<tr><td colspan=\"2\" bgcolor=\"#C0C0C0\"></td></tr>"
    + "</table>"
    + "</div>");

    Message.IsDraw = true;
    setInterval(Message.Fix, 10);
    }Message.ValidateContrl = function(control)
    {
    if(control.m_title == null || control.m_title == undefined || control.m_message == null || control.m_message == undefined)
    {
    return true;
    }

    // check empty
    if(control.m_empty == "true" && control.value == "")
    {
    return Message.ShowError(control);
    }

    // check number
    if(control.m_number == "true" && !string.IsNumber(control.value))
    {
    return Message.ShowError(control);
    }

    // check length
    if(string.IsNumber(control.m_length) && control.value.length > parseInt(control.m_length))
    {
    return Message.ShowError(control);
    }

    // check regex
    if(control.m_pattern != null && control.m_pattern != undefined && control.m_pattern != "" && control.value != "")
    {
    var re = new RegExp(control.m_pattern);
    if(re.exec(control.value) == null || control.value != re.exec(control.value)[0])
    {
    return Message.ShowError(control);
    }
    }
    //检验特殊字符
    if(control.m_check == "true")
    {
       var re = new RegExp(specialCharacters_pattern);
       if(re.exec(control.value) == null || control.value != re.exec(control.value)[0] || control.value.indexOf("\\") != -1)
       {
           Message.Show(control.m_title, "不能包含特殊字符号[\\,/;'\":?><]");
       Message.Current = control;
       control.select();
       return false;
       } 
    }

    return true;
    }Message.Validate = function(control)
    {
    try
    {
    if(Message.ValidationForm == null && control == null)
    {
    return true;
    }

    var child = (control == null) ? Message.ValidationForm.children : control.children;
    for(var nPos = 0; nPos < child.length; nPos++)
    {
    var subControl = child[nPos];
    if(Message.ValidateContrl(subControl) && Message.Validate(subControl))
    {
    continue;
    }
    return false;
    }
    return true;
    }
    catch(e) { return false; }
    }Message.ShowError = function(control)
    {
    try
    {
    Message.Show(control.m_title, control.m_message);
    Message.Current = control;
    control.select();
    }
    catch(e) {}
    return false;
    }Message.isSupported = function()
    {
    if (typeof Message.isSupported.r == "boolean") 
    return Message.isSupported.r;
    var ua = navigator.userAgent.toLowerCase();
    var an = navigator.appName;
    var r = false;
    if (ua.indexOf("gecko") > -1) r = true; 
    else if (an == "Microsoft Internet Explorer")
    {
    if (document.getElementById) r = true; 
    }
    Message.isSupported.r = r;
    return r;
    }if(Message.isSupported())
    {
    Message.Draw();
    }
      

  4.   

    给你个地址，去下吧
    download.csdn.net/sort/tag/popupwin
      

  5.   

    有个空间 popupbox.dll 可以实现的
      

  6.   

    <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 onclick=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;" onclick=closeDiv() >×</span><!-- <IMG title=关闭 style="CURSOR: hand" onclick=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>