基于坐标在IMAGE上显示图像

Question

我根据已添加到阵列中的css位置逐一在地图上添加点。

var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

但我想根据坐标逐一在地图上添加点。

var coordsx =[{'x':'155'},{'x':'338'},{'x':'236'},{'x':'196'},{'x':'171'}];    
var coordsy =[{'y':'238'},{'y':'328'},{'y':'488'},{'y':'164'},{'y':'439'}];

I tried here

我的脚本在这里：

var position = 0;
var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

$(postop).each(function(i){
var dots=$('<img src="http://i.imgur.com/iAfzQ.jpg" />');
        dots.css('position','absolute');
        dots.offset({ top: postop[position].top, left: posleft[position].left });           
        $("#overlay-dots").append(dots);
        position++;
        i++;
});​

Answer 1

我会将坐标放入数组数组中。此外，您不需要增加变量，因为jquery each会为您执行此操作。 简化的代码是：

var coords = [[23, 23], [34, 84], [34, 54], [56, 76], [103, 103]];

$(coords).each(function(i){
    var pos = this;
    var dot = $('<img src="http://i.imgur.com/iAfzQ.jpg" />');
    dot.css({
        position: 'absolute',
        left: pos[0] + "px",
        top: pos[1] + "px"
    });
    $("#overlay-dots").append(dot);
});​