在图像顶部动态添加元素

Question

当我单击按钮时，它必须在 div 和带边框的图像中添加一个对象 (img, p)，然后获取该对象的位置（x, y 坐标）。

我如何使用 JQuery 来制作这个？

HTML:

<div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;">
    <img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="<?= $segunda_imagem; ?>">
</div>

Answer 1

要让按钮创建一个新的 <img> 并将其放在顶部，请添加以下样式：

div {
    position: relative;
}
img:not(#imagem-principal) {
    position: absolute;
}

然后，您可以在 jQuery 中添加一个 onclick 侦听器：

$("#addImg").click(function() {

    // set x and y to what you want
    var xCoor = // X_COORDINATE;
    var yCoor = // Y_COORDINATE;

    var newImg = $("<img src='/* IMAGE_URL */' />");
    newImg.css({left: xCoor, top: yCoor});
    $("div").append(newImg);
});

这将使用给定的 x 和 y 坐标 在另一个图像 之上创建一个新图像。

参见 JSFiddle.net 上的工作示例。

在图像顶部动态添加元素

Add element on top of image dynamically

html

javascript

jquery

insert