要替换的Javascript字幕<；字幕>；标签

我对Javascript一窍不通。这就是我所拥有的：

<script type="text/javascript">
    function beginrefresh(){

        //set the id of the target object
        var marquee = document.getElementById("marquee_text");

        if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
            marquee.scrollLeft = 0;
        }

        marquee.scrollLeft += 1;

        // set the delay (ms), bigger delay, slower movement
        setTimeout("beginrefresh()", 10);

    }
</script>

函数beginrefresh（）{
//设置目标对象的id
var marquee=document.getElementById（“marquee_text”）；
if（marquee.scrollLeft>=marquee.scrollWidth-parseInt（marquee.style.width））{
marquee.scrollLeft=0；
}
marquee.scrollLeft+=1；
//设置延迟（毫秒），延迟越大，移动越慢
setTimeout（“beginrefresh（）”，10）；
}

---

它向左滚动，但我需要它相对无缝地重复。目前，它只是跳回到了开始。我这样做可能不太可能，如果没有，有谁有更好的方法吗？

这里是一个jQuery插件，它有很多功能：

这件是“丝滑的”

---

HTML5不支持该标记，但是许多浏览器仍会“正确”显示文本，但您的代码不会验证。如果这不是你的问题，那可能是一个选择

据推测，CSS3有能力生成字幕文本，但是因为任何知道如何使用字幕的人都认为这对CSS来说是个“坏主意”，所以我在网上找到的信息非常有限。即使是W3文档也没有对爱好者或自学者提供足够的细节来实现它

PHP和Perl也可以复制这种效果。为此需要的脚本将极其复杂，并且比任何其他选项占用更多的资源。也有可能脚本在某些浏览器上运行过快，导致效果完全无效

回到JavaScript——您的代码（OP）似乎是我发现的最干净、最简单、最有效的代码。我会试试这个。对于无缝的事情，我将寻找一种方法来限制结束和开始之间的空白，可能通过执行while循环（或类似的）并实际运行两个脚本，让一个脚本休息，而另一个脚本正在处理

---

也可能有一种方法通过改变单个函数来消除空白。我是JS的新手，所以我不太清楚我知道这不是一个完整的答案，但有时想法可能会导致结果，即使只是对其他人而言。

简单的javascript解决方案：

window.addEventListener（'load'，function（）{
函数go（）{
i=i
#字幕{
背景：#eee；
溢出：隐藏；
空白：nowrap；
}

你好，世界！2你好，世界！
我最近使用Cycle 2 Jquery插件在HTML中实现了一个字幕：


文本1
文本2
此脚本用于替换选框标记

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

         $('.scrollingtext').bind('marquee', function() {
             var ob = $(this);
             var tw = ob.width();
             var ww = ob.parent().width();
             ob.css({ right: -tw });
             ob.animate({ right: ww }, 20000, 'linear', function() {
                 ob.trigger('marquee');
             });
         }).trigger('marquee');

     });
     </script>


<div class="scroll">
    <div class="scrollingtext"> Flash message without marquee tag using javascript!  </div>
 </div>


$（文档）.ready（函数（）{
$（'.scrollingtext'）.bind（'marquee'，function（）{
var ob=$（本）；
var tw=ob.width（）；
var ww=ob.parent（）.width（）；
ob.css（{右：-tw}）；
ob.animate（{right:ww}，20000，'linear'，function（）{
ob.触发器（“选框”）；
});
}).触发器（“选框”）；
});
使用javascript显示没有字幕标记的Flash消息！

请参见
使用@Stano code和一些jQuery，我已经创建了一个脚本，用标准的
div
替换旧的
marquee
标记。代码还将解析
选框
属性，如
方向
、
滚动延迟
和
滚动量

代码如下：

jQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

jQuery（函数（$）{
如果（$（'marquee'）。长度==0）{
返回；
}
$（'marquee'）。每个（函数（）{
让方向=$（this.attr（'direction'）；
让scrollamount=$（this.attr（'scrollamount'）；
让scrolldelay=$（this.attr（'scrolldelay'）；
设newMarquee=$（''）；
$（newMarquee.html（$（this.html（））；
$（newMarquee）.attr（'direction'，direction）；
$（newMarquee）.attr（'scrollamount'，scrollamount）；
$（newMarquee）.attr（'scrolldelay'，scrolldelay）；
$（newMarquee）.css（'white-space'，'nowrap'）；
让包装器=$（''）.append（newMarquee）；
$（this）.replaceWith（包装器）；
});
函数开始_选框（）{
让marqueelements=document.getElementsByClassName（'new-marquee'）；
设marqueLen=marqueelements.length
for（设k=0；kjQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});