• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Создать анимированный счетчик номеров на JQuery (Анимированный счетчик номеров от нуля до стоимости)
Создать анимированный счетчик номеров на JQuery
Kosten
Дата: Суббота, 23.06.2018, 02:50 | Сообщение 1
Администраторы
Сообщений:17735
Награды: 55


Вашему вниманию, без стилистики идет счетчик анимированных номеров на jQuery от нуля до заданного значения. Мы получаем отсчет диапазон счетчика свойства CSS , начиная с нуля в течение для каждого цикла в JQuery и установку счетчика в виде текста с помощью CSS собственности внутри функции анимации.

счетчик чисел анимации от нуля до значения, используя анимационную библиотеку JQuery. Используя этот плагин счетчика чисел jquery, вы можете легко отображать эффект анимации, здесь анимация делает движение более похожим на внезапный переход от одного числа к другому и, таким образом, дает эффект приращения.

Используя функцию анимации JQuery, мы могли бы выполнить эту анимацию, и ниже приведены параметры, необходимые для выполнения эффекта анимации.

1. продолжительность: количество раз в миллисекундах для анимации;
2. ослабление: функция ослабления для перехода;
3 step: эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства до его установки;

Первый вариант:



HTML

Код
<span class="zabuksa">741</span>


Jquery

Код
$('.zabuksa').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 8000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});


Демонстрация

Второй вариант:



Сценарий является гибким и настраивается на количество цифр в номере. Он также добавляет запятые для правильного форматирования номера.

HTML

Код
    <div id="kagernatukog"><span class="sicla">132</span>
    </div>
    <div id="kagernatukog"><span class="sicla">275</span>
    </div>


Jquery

Код
$('.sicla').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        }
    });
});


CSS

Код
    #kagernatukog {
    width: 175px;
    border: 1px solid #63656b;
    padding: 2px 3px 3px 3px;
    border-radius: 3px;
    font-family: arial;
    line-height: 16px;
    color: #3e3939;
    font-size: 14px;
    background: #f7f2f2;
    float: left;
    margin: 3px;
}
      
  .sicla {
            line-height: 58px;
            color: black;
            margin-left: 25px;
            font-size: 27px;
        }


Демонстрация
Прикрепления: 1808294.png(7.2 Kb) · 4533204.png(29.9 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Создать анимированный счетчик номеров на JQuery (Анимированный счетчик номеров от нуля до стоимости)
  • Страница 1 из 1
  • 1
Поиск: