类似sina博客的消息提示框特效

这种特效CSDN也有，就是页面右侧缓缓弹出个提示框。不同的是  我先实现的是类似sina博客的那种，要有最小化和上浮切换的那种。苦于没有在sina找到代码，在此拜求 赐教！ 分值送上

解决方案 »

  1.   


    <html>
     <head>
      <title>HTMLPage1</title>
      <meta name="vs_defaultClientScript" content="JavaScript">
      <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
      <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
      <meta name="ProgId" content="VisualStudio.HTML">
      <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
     </head>
     
     <script language =javascript>
       var titlePopup
       var len;
       
       function InitMsgBox()
       { len = 0;
        titlePopup=window.createPopup();
        var titlePopupBody = titlePopup.document.body;
        titlePopupBody.style.border ="solid black 1px";
        var titleContent = "";
        titleContent = titleContent + "<table cellPadding='5' bgcolor='#65c1ff' width='100%' height='100%' border=0 cellspacing=0 cellpadding=0>";
        titleContent = titleContent + "<tr><td align=center><font size = 2>消息提醒</font></td></tr>";
        titleContent = titleContent + "<tr><td><font size = 2>内容</td></font></tr>";
        titleContent = titleContent + "<tr><td><font size = 2>内容</td></font></tr>";
        titleContent = titleContent + "<tr><td><font size = 2>日期</td></font></tr>";
        titleContent = titleContent + "</table>";    
        titlePopupBody.innerHTML = titleContent;
             
        ShowMsgBox();
       }
          
       function MsgBox()
       { 
        len += 4;      
        if (len > 110)
        {   
         window.clearInterval(tID);     
        }        
        else
        {//170固定了消息提示框的宽度
         titlePopup.show(document.body.clientWidth - 170, document.body.clientHeight - len, 170, len, top.document.body); 
        }    
       }
       
       var tID
       function ShowMsgBox()
       {
        tID = window.setInterval("MsgBox()",15);    
       }
     </script>
     
     <body MS_POSITIONING="GridLayout">
      <INPUT onclick="InitMsgBox()" id="Button1" style="Z-INDEX: 101; LEFT: 296px; POSITION: absolute; TOP: 344px" type="button"
       value="Button" name="Button1">
     </body>
    </html>
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
    <!--
    //当前的宽度
    var curLeft = 0;
    //当前的高度
    var curTop = 0;
    //鼠标移动的X坐标
    var curClientX = 0;
    //鼠标移动的Y坐标
    var curClientY = 0;
    var curBool = false; //鼠标点击事件
    function show() {
    curLeft = document.getElementById("advShow").style.pixelLeft;
    curTop = document.getElementById("advShow").style.pixelTop;
    curClientX = event.clientX;
    curClientY = event.clientY;
    document.onmousemove = showDown;
    curBool = true;
    } //鼠标划过事件
    function showDown() {
    if (curBool) {
    var curX = event.clientX; //鼠标划过的X轴坐标
    var curY = event.clientY;//鼠标划过的Y轴坐标
    document.getElementById("advShow").style.pixelLeft = curLeft + (curX - curClientX);
    document.getElementById("advShow").style.pixelTop = curTop + (curY - curClientY);
    }
    } //当前div的高度
    var curHeight = 0;
    //当前div位置的高度
    var highttTop = 0;
    //当前的高度
    var curHeightTop = 0;
    //移动的步数
    var start = 20; //窗体加载是初始化
    function showHeight() {
    curHeight = document.getElementById("advShow").offsetHeight;
    highttTop = document.getElementById("advShow").style.pixelTop;
    } //小化事件
    function showMin() {
    curHeightTop = document.getElementById("advShow").offsetHeight;
    if (curHeightTop <= start) {
    curHeightTop = start;
    return;
    } else {
    curHeightTop = curHeightTop - start;
    document.getElementById("advShow").style.height = curHeightTop + "px";
    }
    setTimeout("showMin()",1);
    } //大化事件
    function showMax() {
    if (curHeightTop >= curHeight) {
    curHeightTop = curHeight;
    return;
    } else {
    curHeightTop = curHeightTop + start;
    document.getElementById("advShow").style.height = curHeightTop + "px";
    }
    setTimeout("showMax()",1);
    } //当前top位置
    var topHeigth = 0;
    //下框的top位置
    var topId = 0;
    //最大宽度
    var curWidth = 0
    //当前left位置
    var curLeftWidth = 0;
    //最小化事件
    function showHeightMin() {
    showMin();
    topHeigth = document.getElementById("advShow").style.pixelTop;
    curLeftWidth = document.getElementById("advShow").style.pixelLeft;
    topId = document.getElementById("advId").style.pixelTop;
    curWidth = document.body.offsetWidth - document.getElementById("advShow").offsetWidth;
    if (curLeftWidth <= 0) {
    curLeftWidth = 0;
    }
    if (topHeigth >= topId) {
    topHeigth = topId;
    return;
    } else {
    topHeigth = topHeigth + start;
    document.getElementById("advShow").style.pixelTop = topHeigth;
    }
    setTimeout("showHeightMin()",1);
    } //最大化事件
    function showHeightMax() {
    if (curLeftWidth >= curWidth) {
    curLeftWidth = curWidth;
    }
    if (topHeigth <= highttTop) {
    topHeigth = highttTop;
    return;
    } else {
    topHeigth = topHeigth - start;
    document.getElementById("advShow").style.pixelTop = topHeigth;
    }
    showMax();
    setTimeout("showHeightMax()",1);

    } //关闭事件
    function showClose() {
    document.getElementById("advShow").style.display = "none";
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onLoad="showHeightMin(),showHeight()">
      <div id="advShow" style="position:absolute;height:200px;width:200px;z-index:1;background-color:#0080FF;left:1000px;top:200px" onmouseup="curBool = false">
    <div style="height:20px;width:200px;text-align:right;background-color:#FF80FF;cursor:hand;" onmousedown="show()">
    <A href="javascript:showMin(),showHeight()">-</A>
    <A href="javascript:showMax()">+</A>
    <A href="javascript:showHeightMin(),showHeight()">最小化</A>
    <A href="javascript:showHeightMax()">最大化</A>
    <A href="javascript:showClose()">关闭</A>
    </div>
    </div>
    <div id="advId" style="position:absolute;width:1190px;height:20px;top:580px;;background-color:#80FF80;"></div>
     </BODY>
    </HTML>
      

  3.   

    跟随滚动条还不好做啊！
    var curLeft  = 0;
    var curTop = 0;
    docuemnt.onload = function() {
       curLeft = document.getElementById("advShow").style.pixelLeft;
       curTop = document.getElementById("advShow").style.pixelTop;
    }function show() {
       document.getElementById("advShow").style.pixelLeft = curLeft  + document.body.scrollLeft;
       document.getElementById("advShow").style.pixelTop = curTop  + document.body.scrollTop;
    }
    window.onscroll = show;