JS循环输出精灵图，单图实现按钮定位

一、html结构代码：
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
....
</ul>
</div>

二、素材准备
将所有图标做在一张长图中，一行一个图标图片，图片之间间隔44PX

三、页面插入如下JS代码：
<script>
// 1.获取元素所有的小li
var lis = document . querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {

//让索引号乘以44就是每个li的背景y坐标，因为图片是一列长图，X坐标为零， index就是我们的y坐标。图1坐标（0，0），图2坐标（0，-44）,依次规律。

var index=i*44;
lis[i]. style. backgroundPosition = '0  -' + index + 'px';
</script>