javascript - Sprite 的位置 z 索引

Question

我已经绝对定位了在 1000px x 1000px 区域内移动的对象/ Sprite 。我希望这些 Sprite 具有相对于其位置的 z 索引:- 越靠左，z-index 越高。- 越往下，z-index 越高(也包括对象的高度)。因此，该区域左下角的对象将比右上角的对象具有更高的 z 索引 - 当对象彼此靠近时，这应该会产生一种很酷的错觉。

我尝试过这个，但失败了:

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

Answer 1

从算法上来说:

1. 读取数组内的所有 Sprite ；
2. 迭代所有数组对象，读取每个对象的左侧位置属性，存储在同一个数组中；
3. 按值(即左位置属性)对数组进行数字排序；
4. 迭代所有数组对象，通过数组项索引设置 z-index。

使用 jQuery 将使这段代码更短。如果您给我们您的 Sprite 和该区域的示例代码，我们可以尝试创建一些 JS 代码，“完成工作”...