자바 스크립트 뉴스 스크롤러

Question

이 사이트

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

이 사이트는 부드러운 스크롤을 implment하기 위해 사용하는 어떤 라이브러리/기능 어떤 생각의 상단에 뉴스 스크롤을 볼?

Answer 1

jQuery 매니아 애호가 인 Remy Sharp는 사용자가 쉽게 구현할 수있는 Markey Plugin을 보유하고 있습니다. 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 밀리 초 동안 다음 틱 호출을 예약합니다.