Javascript动态消息滚动

本文关键字：滚动 消息 动态 Javascript | 更新日期: 2023-09-27 18:08:34

我快要疯了。我在试着在网页上放一个文本提示器。它将在显示器上运行，甚至不需要连接鼠标。它只是显示大楼周围的一些信息。有一件事我想补充一下，我认为这是个好主意。在底部滚动的文本信息，少数人可以编辑。

我之所以使用这个，是因为它是唯一一个看起来足够平滑的滚动，并且不那么神秘，以至于我需要在开发团队中才能理解。

因为我不能仅仅改变div文本并让爬虫滚动它。我试图把它放在一个更新面板设置div文本，而它是渲染和reInit爬虫。控制消息的div在一个名为' crawlerUpdate'的UpdatePanel中。msgString是一个全局Javascript变量，我用它来保存div重置时的值。

我将var oCrawlerUpdate = setInterval(function () { updateCrawler() }, 10000);设置为每10秒更新一次消息(仅用于测试，轮询将更长)

我的更新爬虫看起来像:

    function updateCrawler(){
        msgString = '';
        $.getJSON('getCrawlerText.aspx', function (data) {
            $.each(data, function (index, elem) {
                msgString += index + 1 + '. ' + elem.message + '- - -';
            });
            if ($('#textCrawler').html() != msgString)
                __doPostBack("<%= this.postBackVehicle.UniqueID %>", "");
        });
    }

这就是我开始失去理智的地方。这有点超出我的理解范围，但还算行得通。我必须注册一个启动脚本。我假设被注入和执行时，更新面板发布回来。

 ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(this.postBackVehicle);
 ScriptManager.RegisterStartupScript(this.crawlerUpdate, this.GetType(), "reInitCrawler", "if(!msgString)msgString='"Loading ticker message...'";$('"#textCrawler'").html(msgString);initCrawler()", true);

它在Firefox中100%工作。我更改了数据库中的消息，并且在接下来的10秒内，滚动条将重新启动新消息。当我在IE7中加载它时，人们将使用它，我在jQuery(1.4.1)文件中得到一个未定义的错误，而不是在我的代码中，我不知道从哪里开始。很久以前，当我进行测试时，我能够在每次添加滚动条之前让div显示新消息。我可以看到消息在div中闪烁，但IE立即出现错误。

我还应该指出onLoaddiv是空白的，并且在第一次通过它工作。它滚动我的加载信息，直到第一次投票10秒后。我几乎可以肯定，我把这个问题复杂化了，但我不知道。

我仍然在谷歌搜索其他滚动工具，但这是我最接近的，我想了解为什么IE会让我消化不良。我知道IE是一个善变的野兽，我希望它是相当简单的东西。我已经很接近了，我想继续前进。

编辑:我没有完全使用提供的答案，但我转储了卷轴库，并使用了两个函数。

    function resetCrawler() {
        var contWidth = $('#scrollContainer').width();
        var blockWidth = $('#textCrawler').width();
        var moveLen = (contWidth + blockWidth) * -1
        var timeFigure = (-1 * moveLen)/.05;
        //console.log("Container: " + contWidth + " Block: " + blockWidth + " MovementSpan: " + moveLen + " TimeSpan: " + timeFigure);
        $('#textCrawler').html(msgString).css('left', contWidth).animate({ left: moveLen }, timeFigure, 'linear', function () { resetCrawler() });
    }
    function updateCrawler(){
        msgString = '';
        $.getJSON('getCrawlerText.aspx', function (data) {
            $.each(data, function (index, elem) {
                msgString += index + 1 + '. ' + elem.message + '- - -';
            });
            if ($('#textCrawler').html() != msgString) {
                resetCrawler();
            }
        });
    }

我只是做了一个像素每毫秒的计算，并使它滚动相同的速度，无论消息有多长。我怀疑我遇到了与你发布的链接相同的问题，我在jQuery内部调用了一些东西。我只是在完成时再次调用它，这是由内部div的宽度决定的。还有更多的工作要做，但我认为它已经足够好了…

谢谢你的帮助

Javascript动态消息滚动

我完全支持服务器端代码，大多数时候我反对计时器，但如果你所做的只是滚动一些文本，你没有鼠标输入，没有其他脚本，将需要运行，为什么不只是使用计时器?

显式地将AJAX调用设置为不缓存结果，并使用计时器每隔一段时间调用AJAX来更新文本。

我在这里看到的唯一问题是确保你仍然平滑滚动，没有计时器影响执行移动的能力。


UPDATE:我发现这篇文章实际上告诉你如何做到这一点，使用一个与你想要做的相匹配的例子。


如果你对此有任何问题，请告诉我。好运！:)
相关文章：