zoukankan      html  css  js  c++  java
  • JS模仿MSN右下角弹出提示框


     <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;
                 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)' onclick='start()'>×</a>您有1条新消息</h1><p><a href='javascript:void(0)' onclick='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>
  • 相关阅读:
    layui 获取select下拉选项上自定义的属性
    TP中关联模型的使用
    安卓模仿直播中的闪动(放大缩小)的动画
    Android报错Multiple dex files define Lcom/ta/utdid2/c/a/c
    Date.parse()的坑
    Android应用加固的简单实现方案(二)
    Android应用加固的简单实现方案
    Android中ANR的触发机制-BroadcastReceiver篇
    Android中ANR的触发机制-Service篇
    Application中以标准模式启动Activity报错的原因分析
  • 原文地址:https://www.cnblogs.com/qixuejia/p/1828266.html
Copyright © 2011-2022 走看看