精灵的位置z索引

Positional z-index for sprites

本文关键字：索引 位置 精灵      更新时间：2023-09-26

我有绝对定位的对象/精灵，它们在1000px x 1000px的区域内移动。我希望这些精灵具有相对于其位置的z索引：-越向左，z索引就越高。-z指数（还包括对象的高度）越低。因此，该区域左下角的对象的z索引将比右上角的对象高得多——当对象彼此靠近时，这应该会产生一种很酷的错觉。

我试过了，但失败了：

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

算法：

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

使用jQuery会使代码更短。如果你给我们你的精灵和那个区域的示例代码，我们可以尝试创建一些JS代码，"完成任务"。。。

使用数学很容易做到这一点

当精灵移动时这样做，所以将其添加到移动它们的的方法或函数中

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;
相关文章：