html上下无缝滚动弹幕

最新推荐文章于 2024-09-11 12:58:13 发布

chengyuyuan_zh

最新推荐文章于 2024-09-11 12:58:13 发布

阅读量2.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40750454/article/details/88636627

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>News</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        #all{
            width: 25%;
            height: 330px;
            margin: 6% 65%;
            border: 1px solid #A4B4C1;
            box-shadow: #A4B4C1 5px 0px 10px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            z-index: 1;
        }
        #wrapper{
            overflow:hidden;

            width: 100%;
            height: 300px;

        }
        #div2 {
            /*background:#eeeeee;*/
            margin: auto;
            padding: 0 30px;
            margin-top: 20px;
        }

    </style>
</head>
<body>
    <div id="all">

            <div id="wrapper">
                <div id="demo1">
                    <div id="div2">
                        <a href="跳转路径" style="text-decoration: none">
                            <b style="color: #5B9BD5">[标题]</b>
                            <font color="black" class="title">
                                内容
                            </font>
                            <span style="color: lightslategrey;font-size: 14px;">[时间]</span>
                            <br/>
                            <hr class="simple" color="#5B9BD5" />
                        </a>
                        <br/>
                    </div>
                </div>
                <div id="demo2">
                </div>
                <div id="demo3">
                </div>
            </div>
            <div style="margin-right: 15px">
                <a href="跳转路径" style="float: right;color: #5B9BD5">View more...</a>
            </div>
        </div>


</body>
<script>
    var speed = 50;  // 可自行设置文字滚动的速度

    var wrapper = document.getElementById('wrapper');
    var demo1 = document.getElementById('demo1');
    var demo2 = document.getElementById('demo2');

    demo2.innerHTML=demo1.innerHTML   //克隆demo1为demo2
    demo3.innerHTML=demo1.innerHTML
    function Marquee(){
        if(demo2.offsetHeight-wrapper.scrollTop<=0)  //当滚动至demo1与demo2交界时
            wrapper.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
        else{
            wrapper.scrollTop++   //如果是横向的 将 所有的 height top 改成 width left
        }
    }

    var MyMar=setInterval(Marquee,speed)  //设置定时器
    wrapper.onmouseover=function() {clearInterval(MyMar)}   //鼠标移上时清除定时器达到滚动停止的目的
    wrapper.onmouseout=function() {MyMar=setInterval(Marquee,speed)}  //鼠标移开时重设定时器
</script>
</html>