案例分析：
①首先精灵图图片排列是有规律的；
②核心思路：利用for循环，修改精灵图片的位置background-position；
③分析图片的位置关系。
效果：
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 li{
12 list-style-type: none;
13 }
14 .box{
15 width: 250px;
16 margin: 100px auto;
17 }
18 .box li{
19 float: left;
20 width: 24px;
21 height: 24px;
22 /* background-color: plum; */
23 margin: 15px;
24 background: url(img/sprite.png) no-repeat;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="box">
30 <li></li>
31 <li></li>
32 <li></li>
33 <li></li>
34 <li></li>
35 <li></li>
36 <li></li>
37 <li></li>
38 <li></li>
39 <li></li>
40 <li></li>
41 <li></li>
42 </div>
43 <script>
44 //1.获取元素
45 var lis = document.querySelectorAll("li");
46
47 for(var i=0; i<lis.length;i++){
48 //让索引号乘以44就是每个li的背景y坐标 index就是我们的y坐标
49 var index=i*44;
50 lis[i].style.backgroundPosition ="0 -"+index+"px";
51 }
52 </script>
53 </body>
54 </html>
核心部分：
①图片是有规律的；②遍历算法。
原文地址：https://www.cnblogs.com/cy1227/p/12150639.html
时间： 2024-10-12 16:16:56