1

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

这个想法是在网页上显示图像列表（图像列表将每隔几分钟更改一次）。但每张图片都会滑入页面，效果就像一颗带有轨迹的超速子弹。图像会堆积起来并在显示中停留几秒钟，然后新图像将被推入显示器（旧图像从显示器中取出）。

把它想象成一堆图像；但是许多代码彼此堆叠在一起。

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 回答