CountUp до целевого числа

0

Я хотел бы создать countUp число как этот сайт, но я не хочу, чтобы слайд действовал, просто countUp для целевого номера. Кто-нибудь знает, как это сделать с jquery? благодаря

  • 1
    Вы действительно должны сначала попробовать и задать вопрос, если вы застряли. Просто попросить нас написать код для вас не очень круто
  • 0
    Я новичок в JQuery, есть много вещей, чтобы учиться. Я просто пытаюсь узнать, что делает код для запуска этого эффекта.
Теги:

1 ответ

0
Лучший ответ

Вы можете начать с этой 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

  • 0
    Большое спасибо! Это очень сложный сценарий для меня. Есть ли другой способ сделать это просто. Вот что я представляю: fn.countUp = function () {}); и затем вызовите функцию как $ ('class or id'). countUp (3000).
  • 0
    да, ты всегда можешь сложная часть состоит в том, чтобы создать эти круги и квадратную графику. Фактическая функция это countTo, так что используйте ее как угодно. в основном countTo является функцией счетчика для любого элемента.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню