Jquery：如何将图像叠加在一起？

在下面的代码中，我有一个构建衬衫的页面。 当用户点击选项（“男/女”）时，’＃shirt’部分通过将PNG图像叠加在一起来显示构造的衬衫。 例如，选择“蓝色”的基色将显示蓝色衬衫的图像。 然后，选择“罗纹”的身体缝线将图像放在蓝色衬衫的顶部，增加了罗纹细节。 现在，我的问题是每个新图像都取代了之前的图像。 其他一切正常（选项出现以响应之前选择的选项）。

 Pick Gender
 Male
 Female 
 
 
 Pick Body
 Blue
 Black
 White 
 
 Pick Body
 Blue
 Black
 Pink 
 
 
 Body Stitching
 Plain
 Rib 
 
 
 Plain
 Blue
 Red 
 
 Rib
 Black
 Green 
 
 
 
 
  $(document).ready(function() { $("div.desc").hide(); var data = { "105" : { img: "http://sofzh.miximages.com/jquery/105.png", label: "color 1", price: "100" }, "120" : { img: "http://sofzh.miximages.com/jquery/120.png", label: "color 2", price: "110" }, "145" : { img: "http://sofzh.miximages.com/jquery/145.png", label: "color 3", price: "120" }, "107" : { img: "http://sofzh.miximages.com/jquery/107.gif", label: "color 4", price: "130" }, "211" : { img: "http://sofzh.miximages.com/jquery/211.png", label: "color 5", price: "140" }, "212" : { img: "http://sofzh.miximages.com/jquery/212.png", label: "color 6", price: "150" }, "324" : { img: "http://sofzh.miximages.com/jquery/324.png", label: "color 7", price: "160" }, "325" : { img: "http://sofzh.miximages.com/jquery/325.png", label: "color 8", price: "170" }, }; $('input[name]').click(function() { var value = $(this).val(); // pics the value of the radio button if(value=='male' || value=='female') { $("div.gender").hide('slow'); $("div.gender input:radio").removeAttr('checked'); } if(value=='body_stitching_plain' || value=='body_stitching_rib') { $("div.body_stitching").hide('slow'); $("div.body_stitching input:radio").removeAttr('checked'); } $("#" + value).show('slow'); // addresses the div with the radio button value picked if(this.checked) { //var value = $(this).val(); var value = $(this).data('id'); if (data[value] != undefined) { var html = ''; html = html + ''; $('#shirt').html(html); var html = ''; html = html + '- '+data[value].label+' - '+data[value].price+' NT
'; $('#pricefield').html(html); } } }); }); 

Answer 1

首先，您需要确定图像的显示顺序。例如，从您的代码中我会说您有两个级别（如果需要，可以添加更多级别）：

1. 基础
2. 身体缝合

其次，将每个级别分配给z-index并为每个级别创建

元素。 这些

的样式应该是它们的定位是绝对的，如下所示：

 
 
 ... 

我可能还会指定每个

的宽度/高度以匹配您的图像。

最后，使用jQuery将每个

定位在基本图像的顶部。

 $("#stitchImage").offset($("#baseImage").offset()); 

然后，当您需要替换图像时，只需使用您拥有的代码：

 $("#stitchImage").html(""); 

请注意，您必须使用空白占位图像，以便用户在尚未选择较高图层时可以看到较低图层。

Answer 2

而不是使用：

 $('#shirt').html(html); ('#pricefield').html(html); 

使用.append(...)方法。

 $('#shirt').append(html); ('#pricefield').append(html); 

jQuery .append（）