在JS中使用精灵图的原理

例如需求为一张竖直方向的精灵图,给你10个li,需要给每个li展示精灵图中10个不同的图案

首先思路就是通过js的选择器取到所有li的DOM结点并存进一个数组里

let arr = document.querySelectorAll('li')

接着就是通过设置backgroundPosition样式来取精灵图中的不同图案,假设每个图案的大小都是10px,我们就用for循环实现

 for(let i = 0; i < arr.length ; i++){
 	arr[i].style.backgroundPosition = '0 -' + i * 10 + 'px';
 }

代码的意思就是第1个li取精灵图中第1个图案,第2个li的图案就往下偏移1 * 10px以此类推

简简单单的几行代码中其实有不少坑

‘0 -’ + i + 'px’是啥意思呢?
首先因为i是一个变量,所以这是拼接字符串的操作
然后’0 -'是啥意思呢?
说到这里,需要检查一下自己是否了解backgroundPosition这个样式属性,如果不了解的话去查查文档

backgroundPosition需要传两个值,分别控制x轴方向和y轴方向
所以我们通过js修改样式的时候需要传的是’10px 10px’这样一个字符串
而里面的数值i是动态的变量,所以需要拼接字符串,i不能包进分号里

然而’0 -’ + i + 'px’看起来好像只有一个值,而backgroundPosition只传一个值的话那么就默认y轴是center,这好像不符合我们的需求(y轴方向取不同图案)

这时候一个非常非常容易被坑的点来了
请注意,'0 -‘之中,0和-中间有一个空格!