Question

我想要一些关于HTML5和可能的Javascript库的指导。

想法是在网页上显示图像列表（图像列表将每隔几分钟更改一次）。但是每个图像都会滑入页面，带有一条带有轨迹的超速子弹。图像将叠加并保持显示几秒钟，然后新图像将被推入显示器（旧的图像从显示器中取出）。

把它想象成图像的自动收报机;但很多代码堆叠在一起。

HTML5中是否有任何功能可以实现此目的？或任何可以启用此效果的Javascript库？

提前感谢您的帮助！

Answer 1

我最近写了我自己的自动收报机课程，随时可以根据您的需要进行扩展：

// 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.0到1.0。

在页面上显示带有射击子弹效果的图像

1 个答案: