Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2012, 11:28
Новичок на форуме
Отправить личное сообщение для AntoXa987 Посмотреть профиль Найти все сообщения от AntoXa987
 
Регистрация: 20.01.2012
Сообщений: 4

Изменение ширины блока каждый n-секунд
Привет!

Все копаюсь я в интернете и не могу найти ничего подходящего. Может кто нибудь поможет решить мою проблему. В js только вникаю, но пока не очень успешно...

И так, вот задача:

Есть блок div id="1" и нужно сделать так, что бы каждые пара секунд у него из width вычиталось по 5 пикселей. Без нажатий - сразу после запуска страницы. Это должно происходить онлайн.

Теоретически я знаю, что нужно получить элемент по ID, затем видимо убрать последние 2 символа (px) из переменной, вычесть из получившегося числа 5, затем к результату дописать px и поместить назад в переменную, подождать пару сек и запустить цикл заново, пока width не кончится. Вот только что-то ничего у меня не получилось.

Всем заранее огромное спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2012, 12:19
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

можно начать читать http://javascript.ru/blog/Andrej-Par...cii-JavaScript
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2012, 12:25
Новичок на форуме
Отправить личное сообщение для AntoXa987 Посмотреть профиль Найти все сообщения от AntoXa987
 
Регистрация: 20.01.2012
Сообщений: 4

Спасибо конечно, я видео уроки Попова себе скачал, начну с них, а потом уже буду справочники читать. Но в сейчас просил помочь по скрипту, а не по литературе...
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2012, 12:27
Новичок на форуме
Отправить личное сообщение для AntoXa987 Посмотреть профиль Найти все сообщения от AntoXa987
 
Регистрация: 20.01.2012
Сообщений: 4

Прошу прощения, там действительно полезная инфа! Думал просто ссылка на справочник =) Еще раз сорри!
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2012, 13:06
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

AntoXa987, простой пример можно посмотреть здесь.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2012, 14:39
Новичок на форуме
Отправить личное сообщение для AntoXa987 Посмотреть профиль Найти все сообщения от AntoXa987
 
Регистрация: 20.01.2012
Сообщений: 4

Блин, совсем не варит голова...
Пытаюсь сделать так:
var x = str.substring(0, "document.getElementById("1").style.width.length" - 2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число
for(i=0;i<100;i++) {
x -= 10;
document.getElementById("1").style.width = x+'px';
//ну и тут я еще не разобрался как задержку в пару сек сделать
}
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2012, 16:32
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от AntoXa987 Посмотреть сообщение
Блин, совсем не варит голова...
Пытаюсь сделать так:
var x = str.substring(0, "document.getElementById("1").style.width.length" - 
2); //это что бы удалить px из строки
var y = intal(x) //пытаюсь преобразовать строку в число
?!
alert( *!*parseInt("53px")*/!* );



я бы так сделал.
var el = document.getElementById("1"), // id не может начинаться с числа. это просто пример
     current = el.style.width, // текущее значение ширины.
     duration = 600; // продолжительность в мсек
     started, // время начала анимации
     progr, // её прогресс.
     id; // ID интервала, чтобы его завершить.

if(!current){     // если ширина не указана в атрибуте style
     // кроссбраузерно получаем текущую ширину
     if('\v' == 'v'){   //короткое определение старого IE < 9
          current = el.currentStyle;
     } else {
          current = getComputedStyle(el, null);
     }
     current = current.width;   
}

// теперь преобразуем её в число.
current = parseInt(currentStyle);

started = Date.now(); // отмечаем начало анимации

// ну и анимируем.
id = setInterval(function(){
     progr = (Date.now() - started) / duration;
     
     if(progr > 1) { // анимация закончена
          clearTimeout(id);
          el.style.display = 'none';
     } else { // ещё продолжается
          el.style.width = current * ( 1 - progr ) + 'px';
     }
}, 15);
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2012, 18:12
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

AntoXa987, обратите внимание на пост от melky. В часности на то, что подчеркнуто. Это самый оптимальный вариант. В ссылке, которую приводил я, данный момент реализован через regexp потому, что я в них практикуюсь, и те регулярный выражения были одни из первых
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сверстать три блока одинаковой мах и min ширины? TicTac (X)HTML/CSS 6 06.06.2011 17:44
изменение размера блока dimiork Элементы интерфейса 1 08.01.2011 21:01
плавное изменение размера блока alexk984 jQuery 4 29.11.2010 08:46
Плавное изменение ширины ячейки в таблице fed0R Элементы интерфейса 4 29.07.2009 12:50
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12