Вопрос по css, jquery – Jquery: Как наложить изображения друг на друга?

1

В следующем коде у меня есть страница, которая создает рубашку. Когда пользователь щелкает опцию («Мужской / Женский»), в разделе «#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);

            }

        }

    });

});
Вы говорите, что хотите наложить фотографии поверх друг друга, чтобы можно было добавить разноцветные детали изображения поверх базового изображения рубашки? RustyTheBoyRobot
Хорошо, так в Jsfiddle: например, если вы выберете синий цвет тела, он отобразит тело рубашки. Позже, если вы выберете простую, а затем синюю строчку, это заменит исходное изображение. Однако это должно добавить это. На картинке все pngs и идеально вписываются друг в друга. То же самое для информации о ценах, показанной в div ценового поля. Теперь он заменен, но он должен быть добавлен. Stefan Schneider
Не совсем понятно, о чем ты спрашиваешь. Когда вы говорите «присоединяйтесь», что вы имеете в виду? lucuma
Да, именно это я и имею в вид Stefan Schneider
Я jsFiddled ваш код, чтобы посмотреть, смогу ли я понять ваши намерения: Jsfiddle.net / CJ62j - Я до сих пор не уверен, что тыхоч достигать? Пожалуйста, опишите, что и где следует делать. SpaceBison

Ваш Ответ

2   ответа
1

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

Баз Тело шить

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

<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 + "' />");

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

Спасибо, это сделал работу. Stefan Schneider
0

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

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

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

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

jQuery .append ()

Это завершается: Jsfiddle.net / CJ62j / 1 - который при использовании не выглядит правильно. Не думай, что это намерение. SpaceBison
Это добавляет изображения в разделы. Что не является намерением. В разделах картинки должны быть заменены, но сами разделы должны быть добавлены одна за другой. Таким образом, вы выбираете цвет корпуса футболки, затем добавляете цвет строчки и т. Д. Stefan Schneider
да ладно, неправильно понял твой вопрос. CoryDorning

Похожие вопросы