广告条滑入滑出源代码实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告条滚动</title>
<style type="text/css">
    *{
        padding: 0px;
        margin: 0 auto;
    }
    #ad{
        1000px;
        height:300px;
        font-size: 50px;
        background: red;
        font-weight: 1000;
        font-size: 100px;
        /*margin-top:-300px;*/
    }
    #box{
        1000px;
        height:800px;
        background: green;

    }
</style>

<script type="text/javascript">
window.onload=function(){
    var oad=document.getElementById('ad');//获得ad元素
    
    var timer=setInterval(function(){//定时器向下滑
        var oldtop=parseInt(oad.style.marginTop);//获得ad离上边的距离
        oldtop+=10;//距离增大
        oad.style.marginTop=oldtop+'px';//赋值
        
        if(oldtop==0){//如果到达位置，关闭定时器
            clearInterval(timer);
        }
    },30);

    setTimeout(function(){//3秒后执行
        var time=setInterval(function(){//30毫秒执行一次
            var oldtop=parseInt(oad.style.marginTop);//获得ad离上边的距离
            oldtop-=10;//距离减小
            oad.style.marginTop=oldtop+'px';//赋值
            
            if(oldtop==-300){//到达位置，关闭定时器
                clearInterval(time);
            }
        },30)
    },3000)
}
</script>

</head>
<body>
    <div id="ad" style="margin-top:-300px;">欢迎来到本网站</div>
    <div id="box"></div>
</body>
</html>