我正在wordpress网站上工作,想在目标编号上添加显示动画编号的标签。

这是一个示例(此页面右上方)https://servicestack.net/

我发现了一些基于jQuery的动画师。如果您可以指出更多此类动画师,则选择最佳动画师将很有帮助。对于我的动画,目标编号是静态的(它不是来自任何数据库或数据源)。我应该能够说出目标100并从94开始,以便数字可以从94变为100。

这是我发现的
http://fredhq.com/projects/roundabout/demos/counter

最佳答案

我用两个额外的属性制作了一个元素,如下所示:

<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

关于javascript - 数字动画师-WordPress的,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23344231/

10-09 14:56
查看更多