jQuery的：如何在彼此顶部层中的图像？ [英] Jquery: How to layer images on top of one another?

查看：111
本文介绍了jQuery的：如何在彼此顶部层中的图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在以下code我有一个构造了一个衬衫的页面。如用户点击选项（男性/女性），则#shirt部分由在彼此顶部层叠的PNG图像显示构造的衬衫。例如，选择蓝色的基本颜色会显示蓝色衬衫的图像。然后，选择的肋身体拼接​​将放置图像上的蓝色衬衫加肋细节之上。现在，我的问题是，每一个新形象替换previous的。其他一切工作正常（出现在响应previously所选选项选项）。 

 ＆LT; D​​IV ID =性别类=DIY盒＆GT;
    挑选性别＆LT; BR＆GT;
    ＆LT;输入类型=电台NAME =性别数据ID =值=男/＆GT;＆LT;标签＆gt;男＆LT; /标签＆gt;＆LT; BR＆GT;
    ＆LT;输入类型=电台NAME =性别数据ID =值=女/＆GT;＆LT;标签＆gt;＆女LT; /标签＆gt;＆LT; / DIV＆GT;＆lt;节ID =displaysection＆GT;    ＆LT; D​​IV ID =男级=递减性别DIY盒＆GT;        挑体＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =男数据ID =105值=/＆GT;＆LT;标签＆gt;蓝＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =男数据ID =120值=/＆GT;＆LT;标签＆gt;黑＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =男数据ID =145值=/＆GT;＆LT;标签＆gt;白色＆LT; /标签＆gt;    ＆LT; / DIV＆GT;    ＆LT; D​​IV ID =女类=递减性别DIY盒＆GT;        挑体＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =女数据ID =107值=/＆GT;＆LT;标签＆gt;蓝＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =女数据ID =211值=/＆GT;＆LT;标签＆gt;黑＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =女数据ID =212值=/＆GT;＆LT;标签＆gt;粉红色和LT; /标签＆gt;    ＆LT; / DIV＆GT;＆LT; /节＆gt;＆LT; D​​IV ID =body_stitching级=DIY盒＆GT;    车身拼接＆LT; BR＆GT;
    ＆LT;输入类型=电台NAME =body_stitching数据ID =值=body_stitching_plain/＆GT;＆LT;标签＆gt;平原＆LT; /标签＆gt;＆LT; BR＆GT;
    ＆LT;输入类型=电台NAME =body_stitching数据ID =值=body_stitching_rib/＆GT;＆LT;标签＆gt;＆罗纹LT; /标签＆gt;＆LT; / DIV＆GT;＆lt;节ID =displaysection＆GT;    ＆LT; D​​IV ID =body_stitching_plain级=递减body_stitching DIY盒＆GT;        平原＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =body_stitching_plain数据ID =324值=/＆GT;＆LT;标签＆gt;蓝＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =body_stitching_plain数据ID =325值=/＆GT;＆LT;标签＆gt;红色和LT; /标签＆gt;    ＆LT; / DIV＆GT;    ＆LT; D​​IV ID =body_stitching_rib级=递减body_stitching DIY盒＆GT;        罗纹＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =body_stitching_rib数据ID =值=黑/＆GT;＆LT;标签＆gt;黑＆LT; /标签＆gt;＆LT; BR＆GT;
        ＆LT;输入类型=电台NAME =body_stitching_rib数据ID =值=绿色/＆GT;＆LT;标签＆gt;绿色＆LT; /标签＆gt;    ＆LT; / DIV＆GT;＆LT; /节＆gt;＆LT; D​​IV CLASS =清除＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =战袍＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID =pricefield的风格=浮动：权利＆GT;＆LT; / DIV＆GT;＆LT;脚本＆GT;$（文件）。就绪（函数（）{
    $（div.desc），隐藏（）。    VAR数据= {
        105：{IMG：HTTP：//oceandrive.localhost/images/diy-images/105.png，标签：颜色1，价格：100}，
        120：{IMG：HTTP：//oceandrive.localhost/images/diy-images/120.png，标签：颜色2，价格：110}，
        145：{IMG：HTTP：//oceandrive.localhost/images/diy-images/145.png，标签：色3，价格：120}，
        107：{IMG：HTTP：//oceandrive.localhost/images/diy-images/107.gif，标签：色4，价格：130}，
        211：{IMG：HTTP：//oceandrive.localhost/images/diy-images/211.png，标签：色5，价格：140}，
        212：{IMG：HTTP：//oceandrive.localhost/images/diy-images/212.png，标签：6色，价格：150}，
        324：{IMG：HTTP：//oceandrive.localhost/images/diy-images/324.png，标签：色7，价格：160}，
        325：{IMG：HTTP：//oceandrive.localhost/images/diy-images/325.png，标签：色8，价格：170}，
    };
    $（输入[名]'）。点击（函数（）{
        VAR值= $（本）.VAL（）; //图片单选按钮的值        如果（价值=='男性'||值=='女'）{
            $（div.gender）隐藏（'慢'）;
            $（div.gender输入：电台）removeAttr（'检查'）;。
        }        如果（价值=='body_stitching_plain'||值=='body_stitching_rib'）{
            $（div.body_stitching）隐藏（'慢'）。
            $（div.body_stitching输入：电台）removeAttr（'检查'）;。
        }        $（＃+值）.show（'慢'）; //解决了采摘的单选按钮值的DIV        如果（this.checked）{            // VAR值= $（本）.VAL（）;
            VAR值= $（本）。数据（ID）;            如果（数据[值]！=未定义）
            {                VAR HTML ='';
                HTML = HTML +'＆LT; IMG风格=的z-index：2; SRC =+数据[值] .IMG +'/＆GT;';
                $（'＃衬衫）HTML（HTML）;                VAR HTML ='';
                HTML = HTML +' - '+数据[值] .label +' - '+数据[值]。价格+'NT＆LT; BR＆GT;';
                $（'＃pricefield'）HTML（HTML）;            }        }    }）;}）;


解决方案

首先，你需要决定什么样的顺序您的图片应该出现。例如，从code，我会说你有两个级别（可以如果你需要他们添加更多的级别）：


  1. 基础

  2. 正文拼接

二，分配每个级别的z-index并创建＆LT; D​​IV＆gt;作为每一个元素。这些＆LT; D​​IV＆GT; 的应该称呼让自己的定位是绝对的，就像这样：

 ＆LT; D​​IV ID =baseImage的风格=的z-index：1;位置：绝对;＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =stitchImage的风格=的z-index：2;位置：绝对;＆GT;＆LT; / DIV＆GT;
...

我想大概也是每个指定的宽度/高度＆LT; D​​IV＆GT; 来匹配你的图片

最后，使用jQuery来定位每个＆LT; D​​IV＆GT; 的基本图像的顶部

  $（＃stitchImage）的偏移量（$（＃baseImage）的偏移量（））;

然后，当你需要替换的图片，只需用code，你有：

  $（＃stitchImage）HTML（＆LT; IMG SRC ='+ SRC +'/＆gt;中）;

请注意，你将不得不使用一个空白placeholding图像，使用户可以看到下层时，他们没有选择高层呢。

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):

  1. Base
  2. 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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆