如何解决精灵的位置z索引
| 我已经完全定位了在1000px x 1000px范围内移动的对象/精灵。我希望这些精灵具有相对于其位置的z-indexs: -越靠左,z索引越高。 -越向下,z索引(也包括对象的高度)越高。 因此,该区域左下方的对象将具有比右上方的对象更高的z索引-当对象彼此靠近时,这会产生一种很酷的错觉。 香港专业教育学院试图这样做,但失败了:object.style.zIndex = ( 1000 - parseInt(object.style.left) ) +
parseInt(object.style.top) + object.clientHeight
解决方法
算法上:
读取数组中的所有精灵;
遍历所有数组对象,读取每个对象的左位置属性,存储在同一数组中;
按值对数组进行数字排序(即左位置属性);
遍历所有数组对象,按数组项索引设置z-index。
使用jQuery将使这段代码更短。如果您提供精灵和该区域的示例代码,我们可以尝试eaven创建一些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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。