<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
list-style: none;
margin: 60px auto;
}
li {
float: left;
width: 35px;
height: 35px;
margin: 15px;
background-color: pink;
background: url(sprite.png) no-repeat;
}
</style>
<body>
<ul class="box">
<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>
</body>
<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>