Javascript 使用JQuery将具有x和y坐标的图标放置在另一个图像的顶部
我有一张图片,我想在上面放一个图标。图标具有相对于大图像的x和y坐标。如何使用jQuery和CSS将它们放置在它上面?我想将图标附加到图像中,因为我有许多图标的lopp,我想动态添加它们 这是HTML:Javascript 使用JQuery将具有x和y坐标的图标放置在另一个图像的顶部,javascript,jquery,html,css,position,Javascript,Jquery,Html,Css,Position,我有一张图片,我想在上面放一个图标。图标具有相对于大图像的x和y坐标。如何使用jQuery和CSS将它们放置在它上面?我想将图标附加到图像中,因为我有许多图标的lopp,我想动态添加它们 这是HTML: <div class="panel-body" id="image-class"> <img id="map-view" src="/image1.png"> </div> 提前感谢您。由于您提供的信息很少,我假设您通过AJAX从db获取图标json
<div class="panel-body" id="image-class">
<img id="map-view" src="/image1.png">
</div>
提前感谢您。由于您提供的信息很少,我假设您通过AJAX从db获取图标json数组,数组中的每个项目如下 { “图像\u url”:图标\u url “x”:50, y:10 }
CSS: JS:
//图标列表是通过AJAX或somthing从db中获取的
对于(var i=0;任何示例或实时链接或小提琴?
#map-view {
height: 100%;
width: 100%;
object-fit: contain;
}
#image-class{
position:absolute;
}
#image-class .icon{
position: relative;
}
// 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");
}