使用JQuery在另一个图像的顶部放置x和y坐标的位置图标
问题描述:
我有一个图像,我想在其上放置一个图标。该图标具有相对于大图像的x和y坐标。我如何使用jQuery和CSS将它们定位在顶层?我想将图标附加到图像上,因为我有许多图标,我想动态添加它们。使用JQuery在另一个图像的顶部放置x和y坐标的位置图标
这是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;
}
预先感谢您。
答
由于您提供的资料非常少,我假设从DB你取图标JSON数组通过AJAX像 { '图片网址' 在阵列中的每个项目: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");
}
任何例子或者活链接或摆弄? –