我有一张图片,我想在上面放一个图标。该图标具有相对于大图像的 x 和 y 坐标。我如何使用 jQuery 和 CSS 将它们放在它上面?我想将图标附加到图像,因为我有很多图标,我想动态添加它们。
这是 HTML:
<div class="panel-body" id="image-class">
<img id="map-view" src="/image1.png">
</div>
这是 CSS:
#map-view {
height: 100%;
width: 100%;
object-fit: contain;
}
提前谢谢你。
最佳答案
由于您提供的信息很少,我假设您通过 AJAX 从数据库中获取图标 json 数组,数组中的每个元素都像
{
'image_url' : icon_url
'x':50,
'y':10
CSS:
#image-class{
position:absolute;
}
#image-class .icon{
position: relative;
}
JS:
// list_of_icons is from db via AJAX or somthing
for(var i=0;i<count(list_of_icons);i++)
{
$("<img />").attr('src',list_of_images[i].img_url).addClass('icon').css({top:list_of_images[i].y+'px',left:list_of_images[i].x+'px'}).appendTo("#image-class");
}
关于javascript - 使用 JQuery 将具有 x 和 y 坐标的图标定位在另一个图像的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44541471/