Fiddle

Question

是否可以在两个绝对定位的div之间定位n个div？我正在创建某种地图，并希望在两点之间绘制足迹。我想知道我是否可以计算第一和第二div的坐标并确定有多少足迹（具有固定宽度）介于两者之间并且以某种方式将它们绝对定位在顶部和左侧位置。

我不知道如何将它们放在jQuery或Javascript中。任何想法？

提前谢谢！

Answer 1

嗯，这就是我提出的：

Fiddle

您可以根据需要设置多对积分，其中一个积分为first，另一个积分为second，并且由于以下原因，它们将与步骤配对：

var f = $('.first');
var s = $('.second');

f.each(function(i) {
    var f2 = f.eq(i);
    var s2 = s.eq(i);
    var xdist = s2.position().left - f2.position().left;
    var ydist = s2.position().top - f2.position().top;
    var dist = Math.sqrt(xdist*xdist + ydist*ydist); // Pythagoras
    var numOfSteps = Math.round(dist / 50) - 1;
    var stepX, stepY;

    for (var l = 0; l < numOfSteps; l++) {

        stepX = xdist/(numOfSteps+1)*(l+1) + 
                f2.width()/2 + f2.position().left;

        stepY = ydist/(numOfSteps+1)*(l+1) + 
                f2.height()/2 + f2.position().top;

        $('<div></div>').addClass('step').appendTo($(document.body))
            .css('left', stepX + 'px')
            .css('top' , stepY + 'px');
    }
});

如果没有任何评论，这几乎是可以理解的，但如果你无法弄明白，可以随意提问。

此处计算足迹数量：

var numOfSteps = Math.round(dist / 50) - 1;

所以要改变足迹数量，将数字50更改为其他数字（数字越大，足迹越少）。

很高兴能提供帮助，想出这个很有趣;）

在两个div之间绘制div的路径

1 个答案:

Fiddle