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