无缝滚动

本文深入探讨了HTML中marquee标签的滚动局限性及如何通过JavaScript实现无缝、连续滚动的效果。通过创建两个大小相等的div盒子并设置CSS样式,巧妙地利用JavaScript函数控制div的位置,实现了一种更为流畅的滚动体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   我们在浏览网页的时候经常看到滚动的公告栏,或是图片栏。html标签中marquee标签能实现滚动,但是它的滚动是不连续的,中间有一定的间断,使用js也能轻松实现marquee的滚动效果,而且还能无缝滚动,下面我们就来看看到底是怎么实现的吧。
  首先我们的创建一个的div,再在这个div中包两个大小相等的div盒子。然后设置大盒子overflow:hidden;
<html>
<head>
    <title>文字滚动</title>
    <style type="text/css">
        #con{
            width: 200px;
            height: 500px;
            border: 1px solid red;
            overflow: hidden;
        }       

        .con1{
            width: 200px;
            height: 500px;
            background: red;
            position: relative;
            top:0px;
        }
            .con2{
            width: 200px;
            height: 500px;
            background: blue;
            position: relative;
        }
    </style>

</head>
<body>
    <div id='con'>
        <div class='con1' id='con1' style="top:0">

        </div>

        <div class='con2' id='con2' style="top:0"> 

        </div>
    </div>  
</body>
</html>

js部分:让两个盒子都向上滚动,当滚动到一定位置的时候让他们初始化

function move(){
        var div1=document.getElementById('con1');
        var div2=document.getElementById('con2');
        if(div1.style.top=='-500px'){ 
            div1.style.top='0px';
            div2.style.top='0px;'
        }
        div1.style.top=parseInt(div1.style.top)-1+'px';
        div2.style.top=parseInt(div1.style.top)-1+'px';
        console.debug(div2.style.top);
    }

    setInterval(move,100);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值