Question

我想建立一个“装扮”游戏的网站，你可以点击不同的配件，它们会叠在一起。

因为它有点难以描述，我发现这些例子应该有希望突出我想要做的事情：

This is the closest website that I have found，但我似乎无法找到解决图像应该如何相互叠加的代码。
Similar to this iOS princess game

我现在有数百种不同的配件作为图像，并且（类似于上面的游戏）我需要支持能够选择多个。所以我需要一个解决方案，不要求我在公主的顶部预先保存附件组合的每一个渗透图像（因为那将是数百万个预定义的图像）。

理想情况下，我想要一个Javascript / jQuery或CSS解决方案，但会接受人们的任何建议。 Flash建议也会有所帮助。

所以我的问题是：

上面的示例网站如何将所有图像排列在一起？我似乎无法找到任何正在执行此操作的CSS或Javascript代码？
有关于如何构建此类网站的任何建议（链接，教程或代码示例会很棒）？

Answer 1

简短的回答是肯定的。

有很多方法可以解决这个问题。使用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）。要叠加这些内容，您必须先将位置设置为绝对，这样图片才会忽略任何默认的布局行为。然后，您可以使用左和顶部属性分别定义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以及元素。它们使用起来很有趣，当然也有助于您的应用。

祝你好运。

Answer 2

您必须使用position：absolute与顶部和左侧位置的组合，以及z-index来控制哪些项目显示在顶部。

Answer 3

如果您正在寻找需要更少代码的解决方案，请尝试以下方法：

在photoshop中创建您的艺术品，每个配件位于不同的图层
将每个图层另存为单独的图像。确保使所有图像都具有完整的画布大小，并使用透明度。保存为PNG-24。这样，每个附件的位置将在图像中“硬编码”，因此您无需在代码中处理它。
创建容器<div>，并将其position: relative;。
将所有图片放在<div>内，作为<img>标签，按照正确的顺序排列（堆叠图层，背景图片是第一张图片）
在position: absolute; {/ li>>上应用<img>
这应该让你开始。然后使用jQuery切换每个图像，因为单击代表它们的按钮。

Answer 4

我会考虑使用<canvas>标记和API。

它允许您轻松地绝对定位项目和图像，如果您使用新的浏览器，您将获得硬件加速的好处，这将加快整个过程。

对于IE中的向后兼容性，您需要使用Google的Explorer Canvas javascript插件。

Answer 5

使用jQuery动画，您可以创建“可拖动”图像。为您的图像提供一个onmousedown事件，该事件启动一个函数，根据当前鼠标位置移动图像X水平和Y垂直像素。查看此链接，了解如何使用jQuery查找鼠标位置。 http://docs.jquery.com/Tutorials:Mouse_Position

或者，更好的是，获取jQuery UI“droppable”插件，可以轻松地为任何元素提供拖放功能。 http://jqueryui.com/demos/droppable/

Answer 6

CSS3支持multiple background layers

#example1 {
  width: 500px;
  height: 250px;
  background-image: url(sheep.png), url(betweengrassandsky.png);
  background-position: center bottom, left top;
  background-repeat: no-repeat;
}

Answer 7

使用css属性的组合，您可以实现您所追求的目标。

要将附件放置在正确的位置，您可以将位置设置为绝对位置，并使用绝对坐标指定其位置。

要设置它们显示的顺序，您可以使用z-index属性“堆叠”它们。

退房：

http://www.html.net/tutorials/css/lesson15.php

有关它的一些详细信息。

你可以在网页上将图片叠加在一起吗？

7 个答案: