使用jQuery追加覆盖图像

Question

我正在创建一个应用程序，每次单击框架时都会在主图像上添加框架。

这是我的代码：

ASPX：

<asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" style="border:1px solid #000000;">
         <asp:ImageButton ID="imgBrowse" runat="server" Height="375px" Width="640px" src="Image/MainImage.png"/>
         <input type='file' id="inpUploader" style="display:none;"/>
</asp:Panel>


<img src="Image/Frames/sampleFrame1.png" class="Frames"/>
<img src="Image/Frames/sampleFrame2.png" class="Frames"/>
<img src="Image/Frames/sampleFrame3.png" class="Frames"/>

CS：

protected void Page_Load(object sender, EventArgs e)
    {
        imgBrowse.Attributes.Add("onclick", "document.getElementById('inpUploader').click(); return false;");
    }

JS：

$('.Frames').click(function () {
    var imageClone = $(this).clone();
    $("#stage").append(imageClone);

});

代码附加到舞台但在主图像下方。这是我的代码的示例输出：

我想这样创作：

Answer 1

您可以创建 CSS 类，例如

.overlap { position: absolute; left: 0; top: 0; }

将其应用于克隆图像

var imageClone = $(this).clone().addClass('overlap');
$("#stage").append(imageClone);

DEMO，在演示中有2个图像重叠。

修改

$("#stage").click(function (event) {
    event.preventDefault();
    $('#inpUploader').trigger('click');
    //or
    $('#inpUploader')[0].click();
});