案例 4 循环精灵图填充图片

案例

//循环精灵图填充图片

//分析：

//首先精灵图图偏排列是有规律的。对于竖着排列的 

//利用for循环，修改精灵图片的背景位置background-position

//剩下的就是数学功底了

//style：
.box li{
         float: left;
         width: 24px;
         height: 24px;
         margin: 15px;
         list-style-type: none;
         background: url(images/sprite.png) no-repeat;

    }
 <div class="box">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
     </div>
     <script>
          var lis=document.querySelectorAll('li');
          for(var i=0;i<lis.length;i++){
               // 让索引号 乘以44 就是每个里的背景y坐标 index就是我们的y坐标
               var index= i *44;
               lis[i].style.backgroundPosition='0 -'+index+'px';
          }
     </script>