html上下无缝滚动弹幕

<!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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值