的宽度/高度以匹配您的图像.
放置在基本图像的顶部.
$("#stitchImage").offset($("#baseImage").offset());
然后，当您需要替换图像时，只需使用您拥有的代码:
$("#stitchImage").html("<img src='" + src + "'/>");
请注意，您必须使用空白的占位图片，以便用户在尚未选择较高层的情况下可以看到较低的层.
In the following code I have a page that constructs a shirt. As the user clicks an option ("Male/Female"), the '#shirt' section displays the constructed shirt by layering PNG images on top of each other. For example, selecting a base color of 'blue' will show an image of a blue shirt. Then, selecting a body stitching of "ribbed" will place an image on top of the blue shirt that adds the ribbing detail. Right now, my problem is that each new image replaces previous ones. Everything else works fine (options appearing in response to previously selected options).
<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);
}
}
});
});
解决方案
First, you need to decide what order your images should appear in. For example, from your code I would say you have two levels (you can add more levels if you need them):
- Base
- Body stitching
Second, assign each level to a z-index and create <div> elements for each one. These <div>'s should be styled so that their positioning is absolute, like so:
<div id="baseImage" style="z-index:1; position: absolute;"></div>
<div id="stitchImage" style="z-index:2; position: absolute;"></div>
...
I would probably also specify the width/height of each <div> to match your images.
Finally, use jQuery to position each <div> on top of the base image.
$("#stitchImage").offset($("#baseImage").offset());
Then, when you need to replace images, simply use the code that you have:
$("#stitchImage").html("<img src='" + src + "' />");
Note that you will have to use a blank placeholding image so that users can see lower layers when they haven't selected higher layers yet.
这篇关于Jquery:如何将图像叠加在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
