Question

我有一个侧边栏（固定在右侧），由3张图片Top.png，Mid.png，Bot.png制作。我想知道是否有办法在运行时加载这三个图像并创建/合并为一个新图像（sideBar.png），而不将其保存到HD。

关键是，由于我不知道屏幕的高度，我将放置Mid图像所需的次数，以填充Top.png和Bot.png之间的空间

使用：

的Javascript
HTML 5
CSS 3

EDITED：和CSS，它对所有3个部分都是一样的...它只改变了网址，名称和位置：

$("#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。然后，动画期间不会有任何不同步的内容。

在JavaScript中合并图像

2 个答案: