Слияние изображений в JavaScript

Question

У меня есть боковая панель (фиксированная справа), которая состоит из 3 изображений: Top.png, Mid.png, Bot.png. Мне было интересно, есть ли способ загрузить эти 3 изображения во время выполнения и создать / объединить в новое (sideBar.png), не сохраняя его на HD.

Дело в том, что, поскольку я не знаю высоту экрана, я помещаю изображение Mid столько раз, сколько необходимо, чтобы заполнить пространство между Top.png и Bot.png.

Использование:

• Javascript
• HTML 5
• CSS 3

Редакция: и CSS, он одинаков для всех 3 частей ... он только меняет URL, имя и позицию:

$("#Mid").animate({right: "-230px",}, 500 );
$("#Top").animate({right: "-230px",}, 500 );
$("#Bot").animate({right: "-230px",}, 500 );


#Bot {
        position: absolute;
        top:495; 
        right:0;
        width: 230px;
        height: 35px;
        background-image: url(/images/Bot.png);
    }

Answer 1

Это кажется действительно ненужным.Я бы порекомендовал использовать атрибут CSS repeat-y и строить свои структуры HTML и CSS таким образом, чтобы изображения были в сетке.Это не цель JavaScript.

Answer 2

Вы не показывали HTML-разметку, но я предполагаю, что вы должны поместить три изображения в контейнер div и анимировать контейнер div с помощью одной анимации, а не трех. Тогда во время анимации не будет ничего несинхронизированного.