Здравствуйте.
Задача:
Сделать подвижную таблицу(движущуюся вверх) как в аэропортах(табло с рейсами).
Решение:
Один div блок, в котором таблицы, перед каждой таблицей еще по div блоку как заголовки для этих таблиц.
Уменьшаем свойство top у главного div блока и при каждой итерации увеличиваем значение top первого div блока заголовка. При прикосновении первого и второго заголовков перестаем увеличивать значение top первого заголовка и начинаем увеличивать это значение для второго.
Код:
function MoveDownTable(selector,divisionNum){
selector.offset(function(i,val){
return {top:val.top - 0.5};
});
var currentDivision = $('#div'+(divisionNum));
var nextDivision = $('#div'+(divisionNum+1));
var currentDivisionHeight=currentDivision.height()+10;
if (nextDivision.offset()!=undefined){ //Если найден следующий заголовок.
if (!(nextDivision.offset().top-currentDivisionHeight<=currentDivision.offset().top)){ //Пока заголовки не соприкоснулись.
stopMove=currentDivision.offset().top; //Запоминаем положение активного заголовка и двигаем его вниз.
MoveDownDivision(currentDivision);
}
if (nextDivision.offset().top<=stopMove) { //Как только следующий заголовок встает на место активного.
divisionNum++; //Делаем его активным и на всякий случай устанавливаем его в правильное положение.
nextDivision.offset(function(i,val){
return {top:val.top};
});
}
} else {
MoveDownDivision(currentDivision); // просто двигаем активный заголовок
}
var footerDivHeight=$('.mainFooter').height()+10;
if (MainDiv.offset().top>(MainDiv.height()-$(window).height()+footerDivHeight)*-0.5){ //Если таблица не вмещается в видимую область, двигаем её.
requestAnimationFrame(function() {MoveDownTable(MainDiv,divisionNum);});
}else{ //Если прошла вся таблица, ждем 3 секунды и загружаем новую.
setTimeout(FadeOutMain,3000);
}
}
function MoveDownDivision(currentDivision){
currentDivision.offset(function(i,val){
return {top:val.top + 0.5};
});
}
Проблема:
Нужно, чтобы это двигалось плавно. Но при разрешении экрана 1920 на 1080 (экран расположен вертикально) и 4 таблицах по ~60 строк. Всякая плавность исчезает, неттопы с NVIDIA ION не справляются.
Вопрос собственно такой - Это из за моего кривого кода или на таких мощностях не возможно в Google Chrome рендерить движение этих таблиц плавно?
Заранее спасибо и прошу прощения за смысловую кашу в содержании.
