Javascript 新闻滚动条

Question

查看本网站顶部的新闻滚动条

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

知道这个网站使用什么库/函数来实现如此流畅的滚动条吗？

Answer 1

他们有一个格式非常漂亮的代码块，您可以研究。当您访问该站点时，打开您最喜欢的 JS 调试器，等待一切开始运行，然后在您的调试器中按“Break All”或等效按钮。您会看到如下内容:

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 毫秒。