一、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>
|
