JQuery: как сложить изображения друг над другом?

Question

В следующем коде у меня есть страница, которая создает рубашку. Когда пользователь нажимает опцию («Мужской/Женский»), в разделе «#shirt» отображается построенная рубашка, накладывая изображения PNG друг на друга. Например, при выборе базового цвета «синий» будет отображаться изображение синей рубашки. Затем, выбрав строчку тела «ребристый», поместите изображение поверх синей рубашки, которое добавит детали ребра. Прямо сейчас, моя проблема в том, что каждый новый образ заменяет предыдущие. Все остальное отлично работает (параметры появляются в ответ на ранее выбранные параметры).

<div id="gender" class="diy-box"> 
    Pick Gender<br> 
    <input type="radio" name="gender" data-id="" value="male" /><label>Male</label><br> 
    <input type="radio" name="gender" data-id="" value="female" /><label>Female</label> 

</div> 

<section id="displaysection"> 

    <div id="male" class="desc gender diy-box"> 

     Pick Body<br> 
     <input type="radio" name="male" data-id="105" value="" /><label>Blue</label><br> 
     <input type="radio" name="male" data-id="120" value="" /><label>Black</label><br> 
     <input type="radio" name="male" data-id="145" value="" /><label>White</label> 

    </div> 

    <div id="female" class="desc gender diy-box"> 

     Pick Body<br> 
     <input type="radio" name="female" data-id="107" value="" /><label>Blue</label><br> 
     <input type="radio" name="female" data-id="211" value="" /><label>Black</label><br> 
     <input type="radio" name="female" data-id="212" value="" /><label>Pink</label> 

    </div> 

</section> 

<div id="body_stitching" class="diy-box"> 

    Body Stitching<br> 
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_plain" /><label>Plain</label><br> 
    <input type="radio" name="body_stitching" data-id="" value="body_stitching_rib" /><label>Rib</label> 

</div> 

<section id="displaysection"> 

    <div id="body_stitching_plain" class="desc body_stitching diy-box"> 

     Plain<br> 
     <input type="radio" name="body_stitching_plain" data-id="324" value="" /><label>Blue</label><br> 
     <input type="radio" name="body_stitching_plain" data-id="325" value="" /><label>Red</label> 

    </div> 

    <div id="body_stitching_rib" class="desc body_stitching diy-box"> 

     Rib<br> 
     <input type="radio" name="body_stitching_rib" data-id="" value="black" /><label>Black</label><br> 
     <input type="radio" name="body_stitching_rib" data-id="" value="green" /><label>Green</label> 

    </div> 

</section> 

<div class="clear"></div> 

<div id="shirt"></div> 

<div id="pricefield" style="float:right"></div> 

<script> 

$(document).ready(function() { 
    $("div.desc").hide(); 

    var data = { 
     "105" : { img: "http://oceandrive.localhost/images/diy-images/105.png", label: "color 1", price: "100" }, 
     "120" : { img: "http://oceandrive.localhost/images/diy-images/120.png", label: "color 2", price: "110" }, 
     "145" : { img: "http://oceandrive.localhost/images/diy-images/145.png", label: "color 3", price: "120" }, 
     "107" : { img: "http://oceandrive.localhost/images/diy-images/107.gif", label: "color 4", price: "130" }, 
     "211" : { img: "http://oceandrive.localhost/images/diy-images/211.png", label: "color 5", price: "140" }, 
     "212" : { img: "http://oceandrive.localhost/images/diy-images/212.png", label: "color 6", price: "150" }, 
     "324" : { img: "http://oceandrive.localhost/images/diy-images/324.png", label: "color 7", price: "160" }, 
     "325" : { img: "http://oceandrive.localhost/images/diy-images/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 + '<img style="z-index:2;" src="'+data[value].img+'"/>'; 
       $('#shirt').html(html); 

       var html = ''; 
       html = html + '- '+data[value].label+' - '+data[value].price+' NT<br>'; 
       $('#pricefield').html(html); 

      } 

     } 

    }); 

}); 

Answer 1

Во-первых, вы должны решить, в каком порядке ваши изображения должны появиться. Например, из вашего кода я бы сказал, у вас есть два уровня (вы можете добавить больше уровней, если вы нуждаетесь в них) :

1. Base
2. сшивание тела

Во-вторых, присвойте каждому уровню z-index и создайте для каждого из них <div>. Эти <div> «s должны быть оформлены таким образом, что их расположение является абсолютным, так как:

<div id="baseImage" style="z-index:1; position: absolute;"></div> 
<div id="stitchImage" style="z-index:2; position: absolute;"></div> 
... 

я бы, вероятно, также указать ширину/высоту каждого <div> в соответствии с вашими изображениями.

Наконец, используйте jQuery для размещения каждого <div> поверх базового изображения.

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

Затем, когда вам нужно заменить изображения, просто используйте код, который у вас есть:

$("#stitchImage").html("<img src='" + src + "' />"); 

Обратите внимание, что вы должны использовать пустой placeholding изображение так, чтобы пользователи могли видеть нижние слои, когда они еще не выбрали более высокие уровни.

Answer 2

вместо использования:

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

использовать метод .append(...).

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

jQuery .append()