Javascript动态消息滚动条

时间:2013-04-11 13:45:23

标签: c# jquery asp.net

我慢慢疯了。我正试图在网页上添加文本自动收录器。它会在显示器上运行,甚至连鼠标都没有连接。它只显示建筑物周围的一些信息。我想补充一点,我认为这是一个好主意。底部的滚动文字信息,少数人可以编辑。

我正在使用this,因为它是唯一似乎滚动得足够顺畅并且不那么神秘,我需要在开发团队中理解的人。

因为我不能只更改div文本并让爬虫滚动它。我试图将它放在更新面板中,在渲染时重新设置div文本并重新创建爬虫。控制消息的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中看到消息flash,但IE后面会立即出错。

我还应该指出onLoad div是空白的,并且第一次通过它工作。它滚动我的加载消息,直到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();
            }
        });
    }

我只是按每分钟计算一次px,并且无论消息有多长,它都会以相同的速度滚动。我怀疑我遇到了与你发布的链接相同的问题,我在jQuery中调用了一些东西。我只是在完成时再次调用它,这是由内部div的宽度决定的。还有更多工作要做,但我称之为足够好......

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我全都是服务器端代码,我大多数时候都反对计时器,但是如果您只是滚动一些文本并且没有鼠标输入而没有其他需要运行的脚本,为什么不呢?只是使用计时器?

明确设置您的AJAX调用以不缓存结果,并使用计时器每隔一段时间调用一次AJAX来更新文本。

我在这里看到的唯一问题是确保您仍然可以顺利滚动,而计时器不会影响执行移动的能力。


更新:我发现this post实际上告诉您如何执行此操作,使用的示例与您要查找的内容相匹配。


如果您对此有任何疑问,请与我们联系。祝好运! :)