当我点击按钮时，它必须在 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>
最佳答案
让按钮创建一个新的 <img>并将其放在顶部，添加以下样式:
div {
position: relative;
}
img:not(#imagem-principal) {
position: absolute;
}
然后，您可以添加 onclick jQuery 中的监听器:
$("#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 上的工作示例.
关于javascript - 在图像顶部动态添加元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33582526/