将几张家具的图片拼凑起来，模仿变色。

Question

我正在为一家家具厂做一个网站。我们在网站上使用了很多jQuery。

我想让家具的某些部分改变颜色，所以我想我要做一个基本家具的div和一个可以改变颜色的部分的叠加div，这个叠加div将包含一个当前家具颜色的蒙版PNG。叠加div将包含一个当前家具的蒙版PNG，并选择颜色。

然后，我想显示10-15种不同的颜色（将是透明的，蒙版的PNG）。

我的问题是如何将正确的家具与正确的覆盖PNG匹配起来。

例如，如果我有一张长凳，一张桌子和一把椅子，每张椅子都有10-15个叠加。我怎样才能将这些家具配对，使它们正确地工作，并且不会将桌子的叠加设置在椅子的底座上？

先谢谢你。

Answer 1

我有一个像这样的支架。

<div id="chair_holder" style="background-image:url(chair.png)">
    <img class="overlay red" src="red_chair.png"/>
    <img class="overlay green" src="green_chair.png"/>
    <img class="overlay blue" src="blue_chair.png"/>
    etc...
</div>

每件家具的颜色 然后，我可以像这样为一个给定的支架显示一个特定的颜色叠加。

function showColorOverlay(holder_id, color)
{
    var holder = $('#' + holder_id); //  Get the holder by id
    $('.overlay', holder).hide(0); //  Hide all overlays
    $('.' + color, holder).show(0); //  Show the correct overlay
}

然后我可以调用showColorOverlay('chair_holder', 'red'); 来显示红色的椅子，比如说。

如果加载所有这些PNG会让页面变慢（使用pngcrush让它们尽可能小），你可以在showColorOverlay中懒加载它们。