Question

我正在为家具制造商的网站工作。我们在网站上使用了很多jQuery。

我希望部分家具能够改变颜色，所以我想我会用基本家具制作一个div，并用可以改变颜色的部分叠加div。叠加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中加载它们。

拼凑几个家具图像来模仿变色

1 个答案: