循环精灵图案例
第一种:精灵图竖行排列
注意:每个精灵图顶部之间的的距离是44px,索引号×44px就是每个li 的背景y坐标
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
第二种:精灵图按照长方形排列
注意:按照行来划分精灵图,每一行的Y坐标相同,主要是x坐标不同,注意寻找规律。
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
//这里的i不能等于4
if (i < 4) {
lis[i].style.backgroundPositionX = -(i * 63 + 15) + 'px';
lis[i].style.backgroundPositionY = -14 + 'px';
} else if (i < 8) {
lis[i].style.backgroundPositionX = -((i - 4) * 63 + 15) + 'px';
lis[i].style.backgroundPositionY = -87 + 'px';
} else {
lis[i].style.backgroundPositionX = -((i - 8) * 63 + 15) + 'px';
lis[i].style.backgroundPositionY = -158 + 'px';
}
}
</script>