Изменение ширины блока каждый n-секунд
Привет!
Все копаюсь я в интернете и не могу найти ничего подходящего. Может кто нибудь поможет решить мою проблему. В js только вникаю, но пока не очень успешно... И так, вот задача: Есть блок div id="1" и нужно сделать так, что бы каждые пара секунд у него из width вычиталось по 5 пикселей. Без нажатий - сразу после запуска страницы. Это должно происходить онлайн. Теоретически я знаю, что нужно получить элемент по ID, затем видимо убрать последние 2 символа (px) из переменной, вычесть из получившегося числа 5, затем к результату дописать px и поместить назад в переменную, подождать пару сек и запустить цикл заново, пока width не кончится. Вот только что-то ничего у меня не получилось. Всем заранее огромное спасибо! |
можно начать читать http://javascript.ru/blog/Andrej-Par...cii-JavaScript
|
Спасибо конечно, я видео уроки Попова себе скачал, начну с них, а потом уже буду справочники читать. Но в сейчас просил помочь по скрипту, а не по литературе...
|
Прошу прощения, там действительно полезная инфа! Думал просто ссылка на справочник =) Еще раз сорри!
|
AntoXa987, простой пример можно посмотреть здесь.
|
Блин, совсем не варит голова...
Пытаюсь сделать так: 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'; //ну и тут я еще не разобрался как задержку в пару сек сделать } |
Цитата:
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); |
AntoXa987, обратите внимание на пост от melky. В часности на то, что подчеркнуто. Это самый оптимальный вариант. В ссылке, которую приводил я, данный момент реализован через regexp потому, что я в них практикуюсь, и те регулярный выражения были одни из первых :)
|
Часовой пояс GMT +3, время: 12:26. |