javascript - 基于坐标显示 IMAGE Over 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'}];

我在这里试过

我的脚本在这里：

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

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

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);
});​