zoukankan      html  css  js  c++  java
  • 右下角弹出框

    $(document).ready(function()
    {    
        document.getElementById('winpop').style.height = '0px';
        setTimeout("tips_pop()", 800); //3秒后调用tips_pop()这个函数
    });
    
    function tips_pop() {
            var MsgPop = document.getElementById("winpop");
            var popH = parseInt(MsgPop.style.height); //将对象的高度转化为数字
            if (popH == 0) {
                MsgPop.style.display = "block"; //显示隐藏的窗口
                show = setInterval("changeH('up')", 2);
            }
            else {
                hide = setInterval("changeH('down')", 2);
            }
    }
    
    function changeH(str) {
            var MsgPop = document.getElementById("winpop");
            var popH = parseInt(MsgPop.style.height);
            if (str == "up") {
                if (popH <= 237) {
                    MsgPop.style.height = (popH + 4).toString() + "px";
                }
                else {
                    clearInterval(show);
                }
            }
            if (str == "down") {
                if (popH >= 4) {
                    MsgPop.style.height = (popH - 4).toString() + "px";
                }
                else {
                    clearInterval(hide);
                    MsgPop.style.display = "none";  //隐藏DIV
                }
            }
    }

    页面html

    <div id="winpop">
        <div class="title">
            <span class="close" onclick="tips_pop()">关闭</span></div>
        <div class="con"></div>
    </div>    

    样式

    #winpop{width: 494px;height: 272px;position: absolute;right: 0;bottom: 0;border: 1px solid #666;margin: -1;padding: 1px;overflow: hidden;display: none;z-index: 10;filter: alpha(opacity=85);opacity: 0.85;}
    #winpop .title{width: 100%;height: 15px;line-height: 15px;background: white;font-weight: bold;text-align: center;font-size: 12px;}
    #winpop .con{width: 100%;height: 240px;font-weight: bold;font-size: 12px;color: #FF0000;text-align: center;background: url(../images/Bulletin.jpg) 0 0 no-repeat;}
    #winpop .con .pp{height: 10px;line-height: 10px;}
    .close{position: absolute;right: 4px;top: -1px;color: #000;cursor: pointer;}
  • 相关阅读:
    poj 1579(动态规划初探之记忆化搜索)
    hdu 1133(卡特兰数变形)
    CodeForces 625A Guest From the Past
    CodeForces 625D Finals in arithmetic
    CDOJ 1268 Open the lightings
    HDU 4008 Parent and son
    HDU 4044 GeoDefense
    HDU 4169 UVALive 5741 Wealthy Family
    HDU 3452 Bonsai
    HDU 3586 Information Disturbing
  • 原文地址:https://www.cnblogs.com/dreamshallow/p/3653857.html
Copyright © 2011-2022 走看看