3

div（transperant png）にレイヤーを追加するための適切な関数、またはこの問題を解決するロジックを見つけるのに問題があります。

これは、潜在的な製品の「コンフィギュレータ」の一部です。

セミワーキングデモ（シャツの例）はここにあります：

http://jsfiddle.net/obmerk99/9t4f4/16/

私がappend（）を使用する場合-コードでコメントアウトされているのを見ることができるように-それは際限なく追加されます-前のオプションを削除するにはどうすればよいですか（同じオプショングループからのみ）

1-ここで使用する正しい関数は何ですか？

2-複数の専用divに頼らずに「グループ」分割を作成するにはどうすればよいですか（50〜60のオプションがあります。）-または別のシナリオでは、それらを自動的に作成する方法を教えてください。

3-ラジオ/チェックボックスで機能させる方法は??

私を編集

ラメの言葉の説明：

オプションの「グループ」があり、すべて同じ製品を参照しています。各グループ「オプション」は、オプションの画像またはそれぞれの部分を含む透明なpngに対応します。

たとえば、車を構成する場合、さまざまなホイールの画像を含む「ホイール」オプションのグループ、さまざまなウィンドウを含む「ウィンドウ」オプションのグループ、「カラー」オプションのグループなどがあります。最後に、それらは積み重ねられ、完全なイメージを構成します。アバターや漫画のような画像を作成しているサイトに少し似ており、頭、粘液、背景、メガネ、髪の毛などを選択できます。

4

3 に答える 3

2

たぶん、変更されないものを示すメイン画像を作成できます。その上に、各オプションの画像があり、オプションが最初に選択されたときに画像がマークアップに含まれるか、追加される可能性があります。

これがフィドルのmodです。フィドルを達成しようとしているのは、各オプションにオーバーレイ画像とスパンを追加したことだと思います。

編集：スイッチの自動化は簡単です。表示要素と情報要素に、それに影響を与える要素で終わるIDを指定するだけです
。

<select id="optionX"> <img id="img-optionX"> <span id="desc-optionX">

フィドルを参照してください

簡単にグループ化できるので、チェックボックスの代わりにラジオボタン（選択を使用したくない場合）を使用する必要があると思います。

フィドルを参照してください

于 2012-05-10T07:21:24.190 に答える
0

あなたがコメントしたJSコードの次のコードを試してください

$('#prod').empty().append('<img id="prod-image" style="z-index:1;" src="http://img8.uploadhouse.com/fileuploads/16068/1606810537372e83db57b46d5a2d44d3124ac999.png"/>').append('<span id="collar"><img style="z-index:2;" src="'+data[value].img+'"/>Control Text : </span>');

于 2012-05-10T07:19:14.643 に答える
0

MMOゲームサイトから取得したデータを使用してアバター画像を生成するときに、これを行う必要がありました。PHPとGDライブラリを使用して、必要なすべての部分（さまざまな色のバリエーションを含む）を含む画像をその場で生成し、生成された画像をキャッシュして、同じ構成の後続の呼び出しを再生成する必要がないようにしました。最終的に、アバターのすべての可能な構成がキャッシュされ、画像生成スクリプトは廃止されました。

たぶん、これと同じ手法を使用するか、Jqueryが選択したオプションに基づいて選択できるように、可能なすべての画像を事前に生成することができますか？私が考えることができる他の唯一のオプションは、FlashまたはHTML5のcanvas要素を使用することです。

于 2012-05-10T07:18:18.427 に答える