javascript-压顶广告效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top AD</title>
<style type="text/css">
body{margin: 0 auto;padding: 0;}
a:focus{outline: none;}
#ad{background: #e8e8e8; 960px; display: none;margin: 0 auto;text-align: center;overflow:hidden;position:relative;}
.slide{ 960px;margin: 0 auto;background: gray;text-align: center;height: 40px;line-height: 40px;color: #fff;}
#colse{30px;height:30px;background-color:#666;color:#fff;position:absolute;top:0;right:0;font-size: 12px;line-height: 30px;}
</style>
</head>
<body>
    <div id="ad">
        <h1>欢迎来到风行网</h1>
        <h2>大幅广告</h2>
        <span id="colse">关闭</span>
    </div>
    <p class="slide">风行网欢迎你</p>
</body>
<script type="text/javascript">
var tim = 0, time = 0, timer = 0, ttl = 30, tt = 5000;
var h = 0, maxH = 200;

function addH(){
    var ele = document.getElementById('ad');
    if(h < maxH){
        ele.style.display = 'block';
        h = h + 5;
        ele.style.height = h + 'px';
    }else{
        return;
    }
    clearTimeout(time);
    time = setTimeout(addH, ttl);
}

function decH(){
    var ele = document.getElementById('ad');
    if(h > 0){
        h = h - 5;
        ele.style.height = h + 'px';
    }else{
        ele.style.display = 'none';
    }
    clearTimeout(tim);
    tim = setTimeout(decH, ttl);
}

function colseFun(){
    clearTimeout(time);
    clearTimeout(timer);
    decH();
}

window.onload = function(){
    addH();
    var colseBtn = document.getElementById('colse');
    colseBtn.onclick = colseFun;
    clearTimeout(timer);
    timer = setTimeout(decH, tt);
}
</script>
</html>