анимированне изменение числа
Есть 2 числа начальное и к которому нужно привести. Как лучше сделать плавный переход от одного числа к другому в духе http://jsfiddle.net/Ev5fn/8/ Данная реализация не устраивает ввиду того что не удалось настроить скорость (слишком долго)
|
Tek,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
};
</script>
</head>
<body>
<div id="example"></div>
<div id="test"></div>
</body>
</html>
|
Цитата:
|
Отличный скрипт, кто может подсказать чтобы таймер для первого числа прибавлял по 50, а не по единице?
|
dambar,
var result = Math.floor(((to - from) * progress + from)/50)*50; |
Цитата:
|
Помогите пожалуйста
А сделать чтоб эти числа начинались после нажатия кнопки
|
anna4,
а в чём проблема прописать клик на кнопку? |
Я не знаю как((
Помогите пожалуйста это сделать
|
рони,
Помогите пожалуйста. Очень нужно. Уже неделю ищу ни как не могу найти. как сделать чтоб этот скрипт срабатывал только после нажатия на кнопку <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <script> window.onload=function(){ function number_to(id,from,to,duration) { var element = document.getElementById(id); var start = new Date().getTime(); setTimeout(function() { var now = (new Date().getTime()) - start; var progress = now / duration; var result = Math.floor((to - from) * progress + from); element.innerHTML = progress < 1 ? result : to; if (progress < 1) setTimeout(arguments.callee, 10); }, 10); } number_to("example",900,1500,3000); }; </script> </head> <body> <div id="example"></div> <div id="test"></div> </body> </html> |
anna4,
вы умеите клик поставить на кнопку? если да покажите код хотябы алерт по клику на кнопку. Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
anna4,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script>
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
document.querySelector('#but').addEventListener('click', function() {
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
});
};
</script>
</head>
<body>
<div id="example"></div>
<div id="test"></div>
<input id="but" name="" type="button" value="это кнопа">
</body>
</html>
|
Огромное спасибо
Вы мне очень помогли, спасибо большое. Еще бы можно было чтоб кнопка стояла отдельно в любом другом месте.
|
Цитата:
|
Цитата:
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<style>
#but {
border: thin solid black;
width: 150px;
text-align: center;
padding:10px
}
#but:hover{
border: medium solid #ff0000;
}
</style>
<script>
window.onload=function(){
$('#but').draggable();
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
}
document.querySelector('#but').addEventListener('click', function() {
number_to("example",900,1500,3000);
number_to("test",10,-5,15000)
});
};
</script>
</head>
<body>
<div id="example"></div>
<div id="test"></div>
<div id="but">
это кнопа (тащи меня, куда надо)
</div>
</body>
</html>
|
Помогите...
Попытался прикрутить этот скрипт к себе, не совсем получилось Проблема какая. Есть переменная, которая высчитывается при изменении полей и заносится в див. И собственно мне нужно чтобы ее изменение анимировалось. Скрипт прикрутил. Но не получается сделать чтобы анимация шла от того значения, которое уже стоит. От 0 до текущего значения работает отлично. А если от текущего ставлю, то при анимации 2 числа отображаются, в конце одно пропадает. Код вот такой.
var price = gaz_price + montaj + works + kond + gaz;
var from = $('#itog-price').html();
function number_to(id,from,to,duration) {
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);
};
number_to("itog-price",from,price,1000);
|
the_little,
а так?
var from = +($('#itog-price').html());
|
| Часовой пояс GMT +3, время: 15:22. |