jquery - CountUp 到目标数

Question

我想创建一个类似本网站的 countUp 数字， 但我不希望幻灯片生效，只是 countUp 到目标数字。任何人都知道如何用jquery做到这一点？谢谢

Answer 1

你可以从这个DEMO开始

$(document).ready(function(){ 
var div = 360 / 6;
    var radius = 150;
    var parentdiv = document.getElementById('parentdiv');
    var offsetToParentCenter = parseInt(parentdiv.offsetWidth / 2);  //assumes parent is square
    var offsetToChildCenter = 20;
    var totalOffset = offsetToParentCenter - offsetToChildCenter;
    for (var i = 1; i <= 6; ++i)
    {
        var childdiv = document.createElement('div');
        childdiv.className = 'div2';
        childdiv.id = 'div_'+i;
        childdiv.style.position = 'absolute';
        var y = Math.sin((div * i) * (Math.PI / 180)) * radius;
        var x = Math.cos((div * i) * (Math.PI / 180)) * radius;
        childdiv.style.top = (y + totalOffset).toString() + "px";
        childdiv.style.left = (x + totalOffset).toString() + "px";
        parentdiv.appendChild(childdiv);
    }

     $('#div_1').countTo({
            from: 0,
            to: 10,
            speed: 3000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });

     $('#div_2').countTo({
            from: 0,
            to: 100,
            speed: 3000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
});

在 jsfiddle 中查看完整源代码