javascript - 为更大的数字获取更低的 z-index

Question

这更像是一个数学问题，而不是一个编码问题......我正在创建一个散点图，其中包含不同大小的气泡。我希望较大的尺寸比较小的尺寸具有较低的 z-index，以避免较大的尺寸站在较小的尺寸上并且无法进行交互。所以我需要一个公式通过代码恢复该顺序。谢谢

Answer 1

只需使用大小并将其设为负数 ( var zIndex = size * -1;)。

编辑非负选项。

var zIndex = (1 / size) * 1000;

你可以1000根据自己的喜好调整。对于较大的尺寸（保持在零以上），倒数将给出一个较小但为正的浮点值。乘法为您提供了一个可以使用的数字。

Answer 2

如果您知道气泡的数量，那么您可以首先将最大的一个设为零，将最小的一个设为气泡总数。或者，您可以使用负 Z 指数。

Answer 3

物有所值 ...

从性能的角度来看，最好的方法是在创建时计算并应用每个气泡的 zIndex。

如果这不切实际或不可能，那么您可以按如下方式重新索引所有气泡：

function reindex_bubbles() {
    var bubbleArr = $(".bubble").get().sort(function(a, b) {
        return b.width() - a.width();//or possibly the other way round?
    });
    $.each(bubbleArr, function(i, bubble) {
        bubble.attr('zIndex', i);
    });
}

我们在这里假设.width()给出了气泡大小的可靠度量。如果不是，则替换为其他表达式。