怎么实现marquee标签的向上无缝滚动？

Posted 2023-03-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么实现marquee标签的向上无缝滚动？相关的知识，希望对你有一定的参考价值。

用《marquee》标签，必须一次滚动完之后，才会进行下次滚动，也就是说头尾有很大的间隔，我想实现的效果是：有间隔，但间隔不能太大。通过上网搜到很多例子代码，可是他们获取的滚动区域的文字都是列表形式的，如：
<li>1 <a href="#" title="信息公开工作">挺酷的VB打字效果，加载外部TXT文本</a></li>
<li>2 <a href="#" title="信息公开工作">国务院办公厅转发监察部等部门 </a></li>
而我滚动的文字部分全部来自一个变量a，文字的格式也是在a中设置的，请问该怎么解决这个问题？

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <style>
            #marquee pheight:30px;line-height: 30px;margin:0
        </style>
        <div style="height:30px;overflow:hidden;">
            <div id='marquee'>
                <p>第1段</p>
                <p>第2段</p>
                <p>第3段</p>
                <p>第4段</p>
                <p>第5段</p>
            </div>
        </div>

        <script>
            (function()
                var marquee = document.getElementById('marquee');
                var offset=0;
                var scrollheight =marquee.offsetHeight;
                var firstNode = marquee.children[0].cloneNode(true);
                marquee.appendChild(firstNode);//还有这里
                setInterval(function()
                    if(offset == scrollheight)
                        offset = 0;

                    marquee.style.marginTop = "-"+offset+"px";
                    offset += 1;
                ,50);
            )();
        </script>
    </body></html>

</div>

</div>

var speed=30;

var demo2=document.getElementByIdx_x("demo2");

var demo1=document.getElementByIdx_x("demo1");

var demo=document.getElementByIdx_x("demo");

demo2.innerHTML=demo1.innerHTML;

function Marquee()

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight;

else