操作元素之循环精灵图背景
Posted cy1227
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了操作元素之循环精灵图背景相关的知识，希望对你有一定的参考价值。
案例分析：
①首先精灵图图片排列是有规律的；
②核心思路：利用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>
核心部分：
①图片是有规律的；②遍历算法。
以上是关于操作元素之循环精灵图背景的主要内容，如果未能解决你的问题，请参考以下文章