Заказать обратный звонок * Бесплатный сервис связи * В удобное для вас время


Анимированное увеличение чисел


В этом пример мы разберем, как сделать число анимированным без  плагинов.
Сделаем анимацию числа, которое увеличивается до нужного нам предела и с заданной скоростью.
Для начала создадим контейнер
  1. <div id="num"></div>
И в принципе больше в HTML разметке нам ничего не нужно.
Напишем сразу скрипт:
  1. $('#num').animate({ num: 90 - 3/* - начало */ }, {
  2. duration: 5000,
  3. step: function (num){
  4. this.innerHTML = (num + 3).toFixed(2) + '%'
  5. }
  6. });

Запускаем скрипт и наше число увеличивается до 90, именно такое предел мы задали в скрипте. Кстати, заметьте мы не только можем указывать предел, но еще и скорость анимации в свойстве duration, в котором указанно 5 секунд.

Более сложный пример с тысячными:
  1. $.Tween.propHooks.number = {
  2. get: function ( tween ){
  3. var num = tween.elem.innerHTML.replace(/^[^\d-]+/, '');
  4. return parseFloat(num) || 0;
  5. },
  6.  
  7. set: function( tween ) {
  8. var opts = tween.options;
  9. tween.elem.innerHTML = (opts.prefix || '')
  10. + tween.now.toFixed(opts.fixed || 0)
  11. + (opts.postfix || '');
  12. }
  13. };
  14.  
  15. $('#num2')
  16. .delay(2000)
  17. .animate({ number: 95 }, {
  18. duration: 5000,
  19. prefix: '~',
  20. postfix: '%',
  21. fixed: 3
  22. });

Еще один пример для наглядности, где мы задаем минимальные и максимальные значения:
  1. <p id="dynamic-number">35</p>
  2.  
  3. var currentNumber = $('#dynamic-number').text();
  4.  
  5. $({numberValue: currentNumber}).animate({numberValue: 100}, {
  6. duration: 1000,
  7. easing: 'linear',
  8. step: function() {
  9. $('#dynamic-number').text(Math.ceil(this.numberValue));
  10. }
  11. });
Значение, с которого мы начинаем отсчет приписывается в контейнере HTML, поскольку оно может вставляться туда динамически через какой-нибудь php скрипт, а JS код будет его уже увеличивать в браузере клиента.

Ну и напоследок еще один пример, в котором нижний и верхний предел задаются непосредственно в javascript коде:
  1. var output = $('span'),
  2. start = 0,
  3. end = 80,
  4. timer = setInterval(function () {
  5. output.text(start++ + '%');
  6. if (start > end) {
  7. clearInterval(timer);
  8. }
  9. }, 50);
Можно еще улучшить скрипт, например запускать функцию увеличение числа при прокрутки страницы вниз, когда блок, в котором увеличивается число, находиться в видимой части страницы, если кого интересует такая доработка пишите в комментариях.

Пример запуска при прокрутке 0


343 просмотра
24.03.2017
Теги: jquery javascript



Загрузка

Возврат к списку