Плавное увеличение числа
Всем привет. Необходимо реализовать функцию плавного увеличения числа от 0 до какого-нибудь, за определенное время.
Самому не дошло, прошу совета у профессионалов! |
raler,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$({
n: 0
}).animate({
n: 1E3
}, {
duration: 20E3,
step: function (a) {
$("#test").html(a | 0)
}
})
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
|
СПАСИБО!
отлично работает! |
jquery для этого не приспособлена
держи хак
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<div id="result">Тут будет результат</div>
<script>
var res = $('#result');
$({ number: (parseFloat(prompt('Введите стартовое значение', '5')) || 0) } ).animate({ number: (parseFloat(prompt('Введите конечное значение', '405')) || 0)}, {
duration: (parseFloat(prompt('Продолжительность в миллисекундах \n\t (вообще тут может быть алиас к времени - напр. "slow")', '6000')) || 400),
easing: 'linear',
queue: false,
step: function (now, tween) {
res.html( now );
}
});
</script>
|
raler, вариант без jquery
анимированне изменение числа |
Мой небольшой рабочий пример, сам новичок пишу всякую ерунду иногда), но тут перемешка js и jquery, так что не забудьте подключить jquery.
<span class="number-count__red">0</span>
var cikl = false; //функция выполняется один раз
window.onscroll = function scroll() {
var scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
); //получаю высоту страницы
var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //получаю цифру, на сколько прокручин элемент
var scrollTopElemParent = $('.category__header').height(); //высота header
var scrollTopElem = $('#promos').offset(); //высота от header до нужного мне блока $('#promos')
var start = 0, end = 135; // начало анимации конец анимации
if (scrollTopElem.top < scrollTop + scrollTopElemParent + 400) { // после того как мы докрутили до эелмента начинаем выполнять
if (!cikl) {
var element = $('.number-count__red') //получаем наш селектор
if (start <= end) {
var intervlal = setInterval(function () { //увеличиваем значение на 1 каждый1 0,2 сек.
element.innerHTML = start; // записываем число в наш селектор
start += 1;
if (start == end) { //когда начальное значение и конечно будут равны оставнавливаем функцию
clearInterval(intervlal);
element.innerHTML = end;
}
}, 20);
}
cikl = true;
}
}
}
}
|
| Часовой пояс GMT +3, время: 17:08. |