核心思路
<!-- 首先精灵图图片是有规律的
核心思路：利用for循环修改精灵图片的背景位置
让循环里的i索引号*44就是每个图的y坐标-->
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
JavaScript代码如下
<script>
// 获取元素li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号乘以44就是每个li的背景y坐标 indedx就是y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
