• 右下角弹出框


    $(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;}
  • 相关阅读:
    目前比较全的CSS重设(reset)方法总结
    UrlRewritingNet.UrlRewrite 中文文档
    CSS Hack汇总快查
    CSS8款CSS制作数据报表技巧
    CSS属性与JavaScript 编码方法对照表
    需要掌握的八个CSS布局技巧
    了解网页设计标准尺寸
    JavaScript是否为创造游戏准备好了
    JavaScript(2)
    CSS兼容
  • 原文地址:https://www.cnblogs.com/dreamshallow/p/3653857.html
Copyright © 2020-2023  润新知