操作元素之循环精灵图背景

案例分析：

①首先精灵图图片排列是有规律的；

②核心思路：利用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>

View Code

核心部分：

①图片是有规律的；②遍历算法。

posted on 2020-01-04 22:31 SailorM 阅读(451) 评论(0) 编辑收藏举报