JS模仿MSN右下角弹出提示框-CSDN博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档

<input id="btn" οnclick="show();" type="button" value="Show" /><div id="tip" style="height:0px; position:fixed; bottom:0px;" data-mce-style="height: 0px; position: fixed; bottom: 0px;"><h1><a οnclick="show()" href="javascript:void(0)" data-mce-href="javascript:void(0)">×</a>您有1条新消息</h1><p><a οnclick="showwin()" href="javascript:void(0)" data-mce-href="javascript:void(0)">点击这里查看详细</a></p></div>
RunCodeCopyCode

< style type = " text/css " >
         *
        {
            margin: 0px;
            padding: 0px;
        }
        html, body
        {
            height: 100 % ;
        }
        body
        {
            font - size: 14px;
            line - height: 24px;
        }
        #tip
        {
            position: absolute;
            right: 0px;
            bottom: 0px;
            height: 0px;
            width: 180px;
            border: 1px solid #CCCCCC;
            background - color: #eeeeee;
            padding: 1px;
            overflow: hidden;
            display: none;
            font - size: 12px;
            z - index: 10 ;
        }
        #tip p
        {
            padding: 6px;
        }
        #tip h1, #detail h1
        {
            font - size: 14px;
            height: 25px;
            line - height: 25px;
            background - color: #0066CC;
            color: #FFFFFF;
            padding: 0px 3px 0px 3px;
            filter: Alpha(Opacity = 100 );
        }
        #tip h1 a, #detail h1 a
        {
             float : right;
            text - decoration: none;
            color: #FFFFFF;
        }
     </ style >

     < script type = " text/javascript " >
    window.onload = function()
    {
       var divTip = document.createElement( " div " );
       divTip.id = " tip " ;
       divTip.innerHTML = " <h1><a href='javascript:void(0)' οnclick='start()'>×</a>您有1条新消息</h1><p><a href='javascript:void(0)' οnclick='showwin()'>点击这里查看详细</a></p> " ;
       divTip.style.height = ' 0px ' ;
       divTip.style.bottom = ' 0px ' ;
       divTip.style.position = ' fixed ' ;
       document.body.appendChild(divTip);
    }


     var handle;
    function start(count) // 参数为新短信个数
    {
        var obj = document.getElementById( " tip " );
        obj.innerHTML = obj.innerHTML.replace( " msgCount " ,count);

         if (parseInt(obj.style.height) == 0 )
        { obj.style.display = " block " ;
          handle = setInterval( " changeH('up') " , 20 ); // 调用该方法参数为循环调用的时间
        } else
        {
             handle = setInterval( " changeH('down') " , 20 )
        }
    }


    function changeH(str) // 逐步改变窗体的高一次递增或递减8px
    {
        var obj = document.all ? document.all[ " tip " ] : document.getElementById( " tip " );
         if (str == " up " )
        {
           if (parseInt(obj.style.height) > 100 )
           clearInterval(handle);
           else
           obj.style.height = (parseInt(obj.style.height) + 8 ).toString() + " px " ;
        }
         if (str == " down " )
        {
           if (parseInt(obj.style.height) < 8 )
          {
           clearInterval(handle);
           obj.style.display = " none " ;
          }
           else
           obj.style.height = (parseInt(obj.style.height) - 8 ).toString() + " px " ;
        }
    }


    function showwin()
    {
    document.getElementsByTagName( " html " )[ 0 ].style.overflow = " hidden " ;
    start();
    window.open( " /member/managemsg.aspx " );
    }

     </ script >

</ head >
< body >
     < a href = " javascript:void(0) " onclick = " start() " > 点击这里测试 </ a >
</ body >

转载于:https://www.cnblogs.com/qixuejia/archive/2010/09/16/1828266.html