Javascript動態郵件滾動條

我慢慢地瘋了。我正在嘗試在網頁上放置文字報告。它會在監視器上運行，甚至沒有連接到它的鼠標。它只是顯示建築物周圍的一些信息。有一件事我想補充說，我認爲這是一個好主意。幾個人可以編輯的底部滾動文本消息。Javascript動態郵件滾動條

我使用的是this，因爲它是唯一一個似乎足夠光滑的滾動條，並且沒有那麼神祕，我需要在開發團隊中才能理解。

由於我不能只更改div文本並讓爬蟲滾動它。我試圖把它放在更新面板中設置div文本，同時它正在渲染和reInit crawler.The控制messasge的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中閃爍，但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的寬度決定的。更多的工作要做，但我稱它足夠好...

謝謝你的幫助。

來源

2013-04-11 Bmo

您多久看一次更新文本？ – 2013-04-11 13:55:52

大概檢查5分鐘的時間間隔。也許更長。 – Bmo 2013-04-11 14:46:38

好的，看看我在答覆中引用的帖子。如果這不能回答你的問題，我可能會有更多的想法。 – 2013-04-11 14:47:28

我所有的服務器端代碼，我是反對的大部分時間定時器，但如果你正在做的是滾動的一些文字，你有沒有鼠標輸入，這將需要運行其他腳本，爲什麼不只是使用計時器？

顯式設置您的AJAX調用不緩存結果，並使用計時器每隔一段時間調用一次您的AJAX來更新文本。

我在這裏看到的唯一問題是確保您仍然平滑地滾動，而不會影響執行移動的能力。

更新：我發現this post，實際上告訴你如何做到這一點，使用可以匹配你正在尋找做一個例子。

讓我知道如果您有任何疑問。祝你好運！ :)

來源

2013-04-11 13:54:33

Javascript動態郵件滾動條

回答

相關問題