的Javascript新聞滾動

Question

見本網站

http://track.dc.gov/Agency/DH0

什麼庫/功能本網站使用到implment如此流暢滾動任何想法的頂部新聞滾動？

Answer 1

jQuery愛好者，雷米夏普，有自己的跑馬燈插件，可以實現很容易地。您可以通過his blog或訪問demo page來收集更詳細的信息。

對於MooTools的用戶，有Mooquee。

您還可以在線查看此示例的實際代碼http://track.dc.gov/Resource/Script/ - 搜索「uiEndless」以查找目標腳本。

Answer 2

他們的代碼是個非常好的格式塊，你可以學習。當您訪問網站時打開您最喜愛的JS調試器，等待所有內容移動，然後在調試器中按「全部中斷」或等效。你會看到如下內容：

Dashboard.UI.EndlessLine = function() { 
    var me = this; 
    me.jq = $(me); 
    me.classNames = { CONTAINER: "uiEndless", VIEW: "uiEndlessView", CANVAS: "uiEndlessCanvas", TILE: "uiEndlessTile" }; 
    var canvas = null; 
    var view = null; 
    var tiles = null; 
    var x = 0; 
    var xx = 0; 
    var canvasWidth = 0; 
    var step = 1; 
    var delay = 40; 
    me.initialize = function(container, data, handler) { 
     required(container, "container"); 
     required(data, "data"); 
     required(handler, "handler"); 
     container.addClass(me.classNames.CONTAINER); 
     view = newDiv(me.classNames.VIEW); 
     canvas = newDiv(me.classNames.CANVAS); 
     view.append(canvas); 
     container.append(view); 
     x = 0; 
     xx = 0; 
     canvasWidth = 0; 
     tiles = me.populateTiles(data, handler); 
     container.click(function() { 
      if (me.started()) me.stop(); else me.start(); 
     }); 
    }; 
    me._resize = function(size) { 
    }; 
    var moveId = 0; 
    me.start = function() { 
     me.stop(); 
     me.tick(); 
    } 
    me.stop = function() { 
     if (moveId > 0) clearTimeout(moveId); 
     moveId = 0; 
    } 
    me.started = function() { 
     return moveId > 0; 
    }; 
    me.tick = function() { 
     var tile = tiles.current(); 
     var width = tile.calculatedWidth; 
     if (x < width - step) { 
      x += step; 
     } else { 
      x = 0; 
      tile.css("left", canvasWidth + "px"); 
      if (tiles.advance()) { 
       xx = 0; 
       canvasWidth = 0; 
       do { 
        current = tiles.current(); 
        width = current.calculatedWidth; 
        current[0].style.left = canvasWidth + "px"; 
        canvasWidth += width; 
       } while (!tiles.advance()); 
      } else { 
       canvasWidth += width; 
      } 
     } 
     canvas[0].style.left = -(xx) + "px"; 
     xx += step; 
     moveId = setTimeout(me.tick, delay); 
    } 
    me.populateTiles = function(data, handler) { 
     var tiles = new Dashboard.Core.List(); 
     var viewWidth = view.contentWidth(); 
     var maxHeight = 0; 
     each(data, function() { 
      var tile = newDiv(me.classNames.TILE); 
      handler.call(this, tile); 
      tile.css({ left: canvasWidth + "px", top: 0 }); 
      canvas.append(tile); 
      var width = tile.outerWidth(); 
      var height = tile.outerHeight(); 
      if (maxHeight < height) maxHeight = height; 
      tile.calculatedWidth = width; 
      canvasWidth += width; // getting width may only be done after the element is attached to DOM 
      tiles.append(tile); 
      view.height(height); 
     }); 
     return tiles.createCycle(); 
    } 
} 

我留下了深刻的印象 - 一切都看起來專業和很好的命名空間。

更新：如果要解釋它是如何工作的，請關注上面定義的tick方法。粉飾所有的細節（因爲我還沒有真正研究過它自己），它計算的步長，在一定量的消息元素向左移動，並調度下一個節拍呼籲在未來40毫秒。