javascript - 数字动画师 - wordpress

Question

我正在一个 wordpress 网站上工作，我想添加一个标签来显示目标数字的动画数字。

这是一个例子(本页右上角)https://servicestack.net/

我找到了一些基于 jQuery 的动画师。如果您能指出更多这样的动画师，将有助于选出最好的一位。对于我的动画，目标数字是静态的(它不是来自任何数据库或数据源)。我应该能够说出 100 的目标并从 94 开始，这样数字就可以从 94 变为 100。

这是我找到的 http://fredhq.com/projects/roundabout/demos/counter

Answer 1

我制作了一个带有两个额外属性的元素，如下所示:

<div class="number" target="100" start="94"></div>

它应该包含您要显示的数字。

我还添加了这段 jQuery 代码:

$(function() {
    var element = $(".number").first();
    element.text(element.attr("start"));
    setTimeout(function(){
        step(element);
    }, randTime());
});

function step(element) {
    element.text(+element.text() + 1);
    if (element.text() != element.attr("target")) {
        setTimeout(function(){
            step(element);
        }, randTime());
    }
};

function randTime() {
    return Math.round(Math.random() * 400);
};

这应该是不言自明的。

另见 this jsFiddle .