精灵的位置z指数

Question

我绝对定位了在1000px x 1000px区域内移动的物体/精灵。我希望这些精灵具有相对于其位置的z索引： - 左边越远，z指数越高。 - 越往下越高的z指数（也包括对象的高度）。 因此，该区域左下方的对象将具有比右上方更高的z指数 - 当对象彼此靠近时，这会产生一种很酷的错觉。

我试过这个，但它失败了：

object.style.zIndex = ( 1000 - parseInt(object.style.left) ) + 
                      parseInt(object.style.top) + object.clientHeight

Answer 1

从算法：

1. 读取数组中的所有精灵;
2. 遍历所有数组对象，读取每个数组对象的左侧位置属性，存储在同一个数组中;
3. 按值以数字方式对数组进行排序（即左侧位置属性）;
4. 遍历所有数组对象，按数组项索引设置z-index。

使用jQuery会缩短此代码。如果你给我们你的sprite和那个区​​域的示例代码，我们可以尝试eaven创建一些JS代码，“做到这一点”......

Answer 2

这很容易使用数学

当精灵移动时执行此操作，将其添加到移动它们的方法或函数

spritePos = {
             'x':1000 - parseInt(object.style.top.replace("px")),
             'y':parseInt(object.style.left.replace("px")) - 1000 
}; 

zIndex = spritePos.x + spritePos.y;
object.style.zIndex = zIndex;