广告式弹出div层显示图片或广告内容

08

2013
05

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            郑德才弹出层测试
        </title>
    </head>
    <body style="padding: 0px; background-color: #3399cc;">
        <div id="ads_14" style="font-family: verdana,sans-serif; width:230px; height:200px; height:0px; padding:0px; margin:0px; right:2; bottom:2;

overflow:hidden; display:none; position:absolute; z-index:1000;">
<div>
<span onclick="hid_pop()" style="position:absolute; right:10px; bottom:8px; color:red; cursor:pointer; font-size:12px; top: 10px; bottom:

14px">
                    关闭
                </span>
            </div>
            <div style="border:0px; margin-left:8px; margin-top:8px;">
                <img src="https://www.zhengdecai.com/images/20130424105224.jpg" style="text-decoration:none; border:0px;width:181px;height:181px" />
            </div>
        </div>
        <script type="text/javascript">
            function show() {
                var div = document.getElementById("ads_14");
                var area = (document.compatMode.toLowerCase() == "css1compat") ? document.documentElement: document.body;
                var width = 230;
                var height = parseInt(div.style.height || div.currentStyle.height);
                var space = 5;
                div.style.left = area.scrollLeft + area.clientWidth - width - space + "px";
                div.style.top = area.scrollTop + area.clientHeight - height - space + "px";
            }
            function show_pop() { //显示窗口
                document.getElementById("ads_14").style.display = "block";

                timer = setInterval("changeH(4)", 2); //调用changeH(4),每0.002秒向上移动一次
            }
            function hid_pop() { //隐藏窗口
                timer = setInterval("changeH(-4)", 2); //调用changeH(-4),每0.002秒向下移动一次
            }
            function changeH(addH) {
                var MsgPop = document.getElementById("ads_14");
                var popH = parseInt(MsgPop.style.height || MsgPop.currentStyle.height); //用 parseInt将对象的高度转化为数字,以方便下面比较（JS读<style>中的

height要用"currentStyle.height"）
                if (popH <= 200 && addH > 0 || popH >= 4 && addH < 0) { //如果高度小于等于230(str>0)或高度大于等于4(str<0)
                    MsgPop.style.height = (popH + addH).toString() + "px"; //高度增加或减少4个象素
                } else { //否则
                    MsgPop.style.display = addH > 0 ? "block": "none"; //向上移动时窗口显示,向下移动时窗口隐藏（因为窗口有边框,所以还是可以看见1~2象素没缩进

去这时候就把DIV隐藏掉）
                    clearInterval(timer); //取消调用,意思就是如果高度超过100象素了,就不再增长了，或高度等于0象素了，就不再减少了
                }
            }
            window.onload = function() { //加载
                document.getElementById('ads_14').style.height = '0px';
                setTimeout("show_pop()", 800); //0.8秒后调用show_pop()
            }
        </script>
   </body>
</html>

效果图片：