因为它有点难以描述,我发现这些例子应该有希望突出我想要做的事情：
> This is the closest website that I have found,但我似乎无法找到能够确定图像应如何叠加在一起的代码.
> Similar to this iOS princess game
我现在有数百种不同的配件作为图像,并且(类似于上面的游戏)我需要支持能够选择多个.因此,我需要一种解决方案,不要求我在公主的顶部预先保存附件组合的每一个渗透图像(因为这将是数百万个预定义的图像).
理想情况下,我想要一个Javascript / jQuery或CSS解决方案,但会采取人们的任何建议. Flash建议也会有所帮助.
所以我的问题是：
>上面的示例网站如何将所有图像排列在一起？我似乎无法找到任何CSS或Javascript代码吗？
>有关于如何构建此类网站的任何建议(链接,教程或代码示例会很棒)？
解决方法
有很多方法可以解决这个问题.使用HTML / CSS,您可以轻松地将元素放在彼此之上.
HTML：
<img id="imga" src="img1.png"/> <img id="imgb" src="img2.png"/> <img id="imgc" src="img3.png"/>
CSS：
img
{
position:absolute;
top: 0px;
left: 0px;
}
那么让我们来看看这里重要的是什么. HTML文档中有3个图像(imga,imgb和imgc).为了覆盖这些,您必须首先将其位置设置为绝对,以便图像将忽略任何默认布局行为.然后,您可以使用left和top属性分别定义img元素的x,y坐标.在上面的示例中,所有元素都覆盖在页面的左上角.为了控制哪个图像最终位于顶部,您可以像这样使用z-index属性：
#imga
{
z-index: 10;
}
#imgb
{
z-index: 20;
}
#imgc
{
z-index: 30;
}
这将使imgc出现在前面,imgb出现在imgc后面,imga落后于其他一切. z-index属性指定哪个元素在另一个元素前面.具有最大z-index的元素在顶部,然后是第二个最大的元素,依此类推.
对于您的项目,我们可以略微调整上面的代码：
HTML
<img id="layer1" src="img1.png"/> <img id="layer2" src="img2.png"/> <img id="layer3" src="img3.png"/>
CSS
img
{
position:absolute;
top: 0px;
left: 0px;
}
#layer1
{
z-index: 10;
}
#layer2
{
z-index: 20;
}
#layer3
{
z-index: 30;
}
既然你现在明白了什么在哪里,你知道第3层在顶部(配件层),第2层在中间(你的人).并且layer1位于底部(背景).然后你可以创建这样的配件：
<img src="accessory1.png" onClick="setAccessory('accessory1.png');"/>
然后使用javascript,你可以设置第一层的src等于点击的配件.
function setAccessory(path){
document.getElementById('layer1').src = path;
//if you're using jQuery,$("#layer1").attr("src",path);
}
您可以根据需要创建任意数量的配件.假设你想在你的人之上添加更多的配件,那么你可以轻松创建更多的图层,分配他们的z索引(甚至可以使用javascript动态地执行此操作,多么令人兴奋！)
总之,我希望你发现这个小教程很有用.为了您的目的,我建议您查看jQuery以及元素.它们将很有趣,当然可以帮助您的应用程序.
祝你好运.
