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

Answer 2

jQuery爱好者，Remy Sharp，拥有自己的Marquee插件，你可以轻松实现。您可以在his blog或访问demo page

收集更深入的详细信息

对于Mootools用户，有Mooquee。

您还可以在http://track.dc.gov/Resource/Script/在线查看此示例的实际代码 - 搜索“uiEndless”以查找目标脚本。

Javascript新闻滚动条

2 个答案: