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

最新推荐文章于 2022-03-31 11:20:20 发布

dianmei3204

最新推荐文章于 2022-03-31 11:20:20 发布

阅读量121

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lzzhuany/p/4589915.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;
        font-weight: 1000;
        font-size: 100px;
        /*margin-top:-300px;*/
    }
    #box{
        width:1000px;
        height:800px;
        background: green;

    }
</style>

<script type="text/javascript">
window.οnlοad=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>

转载于:https://www.cnblogs.com/lzzhuany/p/4589915.html

dianmei3204

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
广告条滑入滑出源代码实现

广告条滑入滑出源代码实现<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>广告条滚动</title><style type="text/css"> *{ ...
复制链接

扫一扫