本文共 586 字，大约阅读时间需要 1 分钟。

循环精灵图

效果

效果如上图所示。

核心思想

类似案例之前也有做过，按照以往的想法我们要么给每个li添加类名一一设置，要么利用:nth-child()一一设置。现如今学习了javascript后可以利用for循环来制作。

1. 设置好ul和li，获取事件源lis为全部的li
2. 利用for循环对所有的li进行遍历
3. 设置好坐标轴变量

代码

代码执行后会看到下面的结果。

我们想要第二张图片，更改y坐标后得到如下效果

lis[i].style.backgroundPosition = '0 -44px';

但是我们想要的效果是每个图片都有各自的精灵图，通过观察不难发现，第一个li的图片纵坐标为0px，第二个li的图片纵坐标为-44px，第三个li的图片纵坐标为-88px······则第i个li的图片纵坐标为i* -44px。

lis[i].style.backgroundPosition = '0 -' + index + 'px';

转载地址：https://blog.csdn.net/zx2014567296/article/details/117906897 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！