Помогите понять поведение скрипта
есть функция, которая размещает на странице контейнер DIV. В этом контейнере находятся несколько вложенных контейнеров, позиционированных относительно родителя и приподнятых вверх, чтобы пользователь их изначально не видел на странице:
function MovingDIV() {
rslt = '<div style="position: relative; top: 0px; border-color: gray; border-style: solid; border-width: 1px;">';
rslt += '<div style="position: relative; background-color: #ccccff; top: -480px; z-index: -100; " id="moving0">';
rslt += '<table><tr><td>Param0</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #ffcccc; top: -480px; z-index: -101;" id="moving1">';
rslt += '<table><tr><td>Param1</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #ccffcc; top: -480px; z-index: -102;" id="moving2">';
rslt += '<table><tr><td>Param2</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #fccccf; top: -480px; z-index: -103;" id="moving3">';
rslt += '<table><tr><td>Param3</td></tr></table>';
rslt += '</div>';
rslt += '<div style="position: relative; background-color: #cfccfc; top: -480px; z-index: -104;" id="moving4">';
rslt += '<table><tr><td>Param4</td></tr></table>';
rslt += '</div>';
rslt += '</div>'
document.getElementById('mainTD').innerHTML = rslt;
document.getElementById('moving0').style.top = "-240px"
timer1 = setInterval('MoveDIV(5)', 50);
}
Есть вторая функция, задача которой отобразить вложенные DIV'ы (они как бы падают сверху страницы на положенное им место, причем не все вместе и сразу, а один за другим):
timer1;
iter = 0;
function MoveDIV (itemcount) {
i = 0;
T = 0;
while (i < itemcount) {
if (iter < i) {
T = document.getElementById('moving' + i).offsetTop;
}
else {
T = document.getElementById('moving' + i).offsetTop + 10 ;
}
if (T > 0) {
T = 0;
}
document.getElementById('moving' + i).style.top = T + "px";
i++
}
iter++;
if (iter == (itemcount - 1 + 24)) {
clearInterval(timer1);
}
}
В принципе все работает (правда, почему-то в обратном порядке, ну это мелочи)... вопрос в другом - каждый следующий контейнер опускается визуально медленнее предыдущего - в итоге первый опускается быстро, а последнего (с индексом 0) приходится терпеливо ждать). Почему так происходит и как с этим справиться? |
var нужно к переменным, да. у вас они не сбрасываются.
|
про которые переменные вы говорите? Если про Т и i, то они при каждой итерации функции MoveDIV должны принудительно ставиться в ноль - если бы этого не происходило, то DIVы двигались хаотично. Объявление их через var все равно ничего не поменяло - последний "падающий" DIV (с индексом 0) значительно тормозит по сравнению с самым первым...
переменная iter до остановки таймера и не должна сбрасываться. Единственный пока выход - это существенно сократить время в setInterval - тогда визуально не успеваешь заметить разницу... но из-за этого теряется эффект "выпадания". И еще один момент - серьезные тормоза особенно касаются DIVов с индексами от 0 до 2 независимо от общего числа таких контейнеров... я увеличил их число с 5 до 20 штук для проверки... |
Ладно. Вопрос решил сам.
|
| Часовой пояс GMT +3, время: 04:59. |