2

许多网站允许您通过更改选项来自定义图像。

例如，这个芭比网站让您可以创建自己的芭比娃娃。您可以在单击时单击各种发型和衣服以及主要图像更新。

其他服装网站也做类似的事情。

是否有任何教程向您展示如何使用 Java Script 或 Jquery 执行此操作？

理想情况下，我正在寻找可以让您在不同情况下重用代码的模板。

我找到了一些教程，但它们都使用 PHP： Bokehman - 这个网站说它使用 Javascript，但它实际上使用的是 PHP Code Canyon - 这个脚本是模板化的，可以轻松换出元素，但再次使用 PHP。

我知道Javascript 确实不支持写入文件，因此您必须使用 PHP 解决方案来保存图像。但是，我只是在寻找一些东西来创建图像。在这个阶段，我不关心储蓄。

4

1 回答 1

1

这就是我最终做到的方式。

1) 为每个资产创建一个单独的 CSS 类。

连接由多个变量组成的资产的类。创建一个.input父类来显示选择表单的图像资产。创建一个.preview子类以在完成的头像上显示图像资产

例如

.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}

.input .input-skin-brown {
background-image(<<image-asset>>);
}

.input .input-hair-style-1 {
background-image(<<image-asset>>);
}


.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}

2) 创建 HTML。将默认资产选项分配给包装器元素。

例如

<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">

<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>


<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>

</div>

3) 当输入表单中的选项被点击时，使用 Jquery 来操作包装器上的类。

例如，如果用户单击 hair-style-2，则包装器中的 hair-style-1 类将更改为 hair-style-2

我对此有一个单独的问题： jQuery: Swap Classes based on Class position

这基本上就是它的全部内容。一旦您编写了 css 类和用于切换类工作的 Jquery 代码，它实际上非常简单。因为您将所有输入存储为表单，所以当用户单击提交时，您可以将值发送到另一个进程。

尖端：

1) 使用 SASS/SCSS 编写 css。 您可以创建一个数组并在 sass 中循环遍历它，这使得维护 css 变得容易。我在这里有一个问题： Sass: Using two @each lists in SCSS CSS - SASS: Using @each based mixins to generate multiple backgrounds

2) 避免使用 CSS 精灵。 尽管精灵对加载时间有很大帮助，但我认为你会疯狂地尝试维护它（取决于所涉及的资产）。有一些工具可以为您维护它，但因为这是一个边缘案例，我认为这些工具不能很好地工作。

3) 加载速度是个问题 当用户点击头像元素时，CSS 加载会有短暂的延迟。这是一个问题，因为用户认为他们的点击尚未注册。为了解决这个问题，创建一个隐藏的 div，它使用display:none. 然后使用 CSS3 多重背景属性将每个资产附加到此 DIV（作为背景）。这样，您的所有资产都会在开始时加载，因此用户点击时不会有延迟。同样，为此使用 SASS 循环和数组，因为数组会自动将所有资产添加到隐藏的 DIV。

4) 仔细考虑类和资产名称。 我最初选择友好的名称（例如 haircolourblack、historybob），因为我认为这样更容易理解代码。然而，事后看来，我希望我已经选择了编号名称（头发颜色 1、发型 1），因为如果您的资产发生变化，事情会变得很棘手（此外，使用数字可以很容易地针对多个化身维护代码）。同样，使用 SASS 数组来减少对此的维护。

5) 使用类前缀 （例如.preview .preview-eye，代替.preview .eye或.preview .preview-hair-style代替.preview .hair ）。这样做的原因是很多名称非常通用，可能会在页面上的多个位置使用（例如，用于 .preview 和 .input 部分）。如果使用前缀，则更容易定位特定类。另外，您可以使用[class*="preview-"]或[class*="input-"] 定位前缀的所有成员，而不必在代码中乱扔许多共享类（例如[class*="-hair-"]，无需将单独的头发类应用于每个头发元素即可获取所有头发元素。

6) 考虑 SVG 如果您将 SVG 用于您的图像资产，您可以保持文件较小，并且它们可以放大到任意大小。请务必注意 SVG 浏览器兼容性 ( http://caniuse.com/svg )

7) 考虑 CSS 背景大小 您还可以使用background-size: contain缩放图像资源，这样可以轻松地为 .preview 和 .input 实例重用相同的图像。但是，它也存在兼容性问题。

它看起来确实是一个令人生畏的项目，主要是因为没有任何关于如何构建它的资源。但如果你把它分解，它实际上很容易。主要是代码维护是个问题，所以一定要计划好！

于 2013-11-14T11:56:14.130 回答