1

HTML5 と可能な Javascript ライブラリに関するガイダンスが必要です。

アイデアは、Web ページに画像のリスト (画像のリストは数分ごとに変更されます) を表示することです。しかし、各画像はページに滑り込み、弾丸の跡がついた高速の弾丸の効果があります. 画像が積み重なり、数秒間表示されたままになり、その後、新しい画像がディスプレイにプッシュされます (古い画像はディスプレイから取り出されます)。

画像のティッカーのようなものだと考えてください。しかし、多くのティッカーが重なり合っていました。

これを実現できる HTML5 の機能はありますか? または、この効果を有効にできる Javascript ライブラリはありますか?

よろしくお願いします。

4

1 に答える 1

0

私は最近、独自のティッカー クラスを作成しました。必要に応じて自由に拡張してください。

// An advanced timeout class which also calculates the current progress
var Ticker = function(start, duration, callback) {

    var _this = this;

    this.start = start;
    this.duration = duration;

    // TODO easing options

    this.reverse = false;
    this.auto_reset = false;
    this.auto_reverse = false;

    this.callback = callback ? callback : null;
    this.timeout = callback ? setTimeout(function() {
        _this.callback();
        if (_this.auto_reset || _this.auto_reverse) { _this.reset(); }
    }, this.duration) : null;
};

Ticker.prototype.status = function() {
    var end = this.start + this.duration;
    var current = +new Date;
    var duration = end - this.start;
    var difference = current - this.start;
    var progress = this.reverse ? 1 - (difference / duration) : (difference / duration);

    if (current >= end) { progress = this.reverse ? 0 : 1; }

    return progress;
};

Ticker.prototype.reset = function() {
    if (this.auto_reverse) { this.reverse = this.reverse ? false : true; }

    var _this = this;
    this.timeout = this.callback ? setTimeout(function() {
        _this.callback();
        if (_this.auto_reset || _this.auto_reverse) { _this.reset(); }
    }, this.duration) : null;

    this.start = +new Date;
};


使用法：

// Tickers every 1000 ms
var ticker = new Ticker(+new Date, 1000, function() {
    console.log("done");
});

ticker.auto_reset = true;

メソッドを呼び出して、現在の進行状況を取得することもできますstatus()。からまで
の現在の進行状況を表す数値を返します。0.01.0

于 2012-09-25T10:16:38.633 に答える