JavaScriptで画像を合成する

Question

3画像（Top.png、Mid.png、Bot.png）で作成されたサイドバー（右側に固定）があります。私は、実行時にこれらの3つの画像をロードし、HDに保存せずに新しい画像（sideBar.png）に作成/マージする方法があるかどうか疑問に思っていました。

私は画面の高さがわからないので、Top.pngとBot.pngの間のスペースを埋めるために何度でもMid画像を配置しています。

• Javascriptを
• HTML 5
• CSS 3

EDITED： と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

あなたはHTMLマークアップを表示していませんが、3つの画像をコンテナdivに入れ、3つではなく1つのアニメーションでコンテナdivをアニメーション化する必要があると思います。その後、アニメーション中に何も同期が外れることはありません。

Answer 2

これは本当に不必要なようです。私は、CSSの属性repeat-yを使用し、画像が網目になるような方法でHTMLとCSSの構造を構築することをお勧めします。これはJavaScriptの目的ではありません。