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

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

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>广告条滚动</title>

<style type="text/css">

    *{

        padding: 0px;

        margin: 0 auto;

    }

    #ad{

        width:1000px;

        height:300px;

        font-size: 50px;

        background: red;

        font-weight: 1000;

        font-size: 100px;

        /*margin-top:-300px;*/

    }

    #box{

        width: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>

 

你可能感兴趣的:(源代码)