广告条滑入滑出

在html正文上面有一个广告,让整个文本向下滑动,让广告显示,然后再让广告滑到上面

<!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;

        margin-top:-300px;

    }

    #box{

        width:1000px;

        height:800px;

        background: green;



    }

</style>

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        $('#ad').animate({'marginTop':'0px'},3000,function(){//3秒ad显示

            setTimeout(function(){//回调函数,定时器

                $('#ad').animate({'marginTop':'-300px'},3000);//3秒ad消失

            },3000);

        });

    })

</script>

</head>

<body>

    <div id="ad">欢迎来到本网站</div>

    <div id="box"></div>

</body>

</html>

 

你可能感兴趣的:(广告)