精灵图使用——如何利用js循环实现精灵图设置

首先对于以下这些图标的设置，应该如何实现呢？

如果是还未学javascript时，我们一般会通过css样式一个个的给它们设置
background-position属性，这样会显得十分鸡肋！很麻烦！！！

在学习完js后我们可以通过DOM操作循环实现精灵图设置

1. 一般我们可以将一些小图标集成在一起（让网页美工来完成），我们我们可以得到这样一张精灵图（png格式）。注意：精灵图图片的排列是有规律的！！
//下图可直接复制使用

2. 利用切图工具找position位置
注意：用切图工具Adobe_Fireworks_CS6找位置position
（精灵图竖的排列是有讲究的，可以用循环一下子就显示出来！）

以下是html代码

以下是css源代码

 <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .box {
            width: 250px;
            height: 180px;
            margin: 100px auto;
            /* background-color: skyblue; */

        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 10px 0 30px 30px;
            background: url('../iconfont/img/jinglingtu.png') no-repeat;
        }
    </style>

以下是javascript代码段

<script>
        // 1.获取所有li 会形成伪数组
        var list = document.querySelectorAll('li');
        // 2.使用for循环来设置每个li的背景图
        for (var i = 0; i < list.length; i++) {
            // 通过设置精灵图的y坐标来设置不同li的背景图
            // 让索引号*44就是每个li的背景y坐标，index就是我们的y坐标
            var index = i * 44;
            // console.log(index);
            list[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>```
    
```javascript

案例2：如何实现下图显示图标效果（给的精灵图是这个丫子的！）

1. 先利用切图工具把它单独裁剪导出！
   
   2.然后找出每个图标在切图工具Adobe_Fireworks_CS6中的x和y坐标。并找出它们的关系，我们可以写出js代码段（这里我测量的数据有点偏差！）

• 注意：一般把精灵图搞成全是一行或一列排列的话更好一些！（。注意：精灵图图片的排列是有规律的！！）

13点44分了 ！！！呃呃呃，时间不多了，该到吃饭的时候了。
第一次写博客（偷偷把csdn当成记笔记的地方了），不是很会组织语言，还请各位大佬见谅！如果有什么疑问和错误之处还请各位大佬们多多提出！小弟不胜感激！哈哈哈……

以下是代码段： 如果需要素材的话，可以底下评论我发链接！

html代码段：
                <!--  生活服务模块 -->
                <div class="lifeservice">
                    <ul>
                        <li>
                            <i></i>
                            <p>话费</p>
                        </li>
                        <li>
                            <i></i>
                            <p>机票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>电影票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>游戏</p>
                        </li>
                        <li>
                            <i></i>
                            <p>彩票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>加油卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>酒店</p>
                        </li>
                        <li>
                            <i></i>
                            <p>火车票</p>
                        </li>
                        <li>
                            <i></i>
                            <p>众筹</p>
                        </li>
                        <li>
                            <i></i>
                            <p>理财</p>
                        </li>
                        <li>
                            <i></i>
                            <p>礼品卡</p>
                        </li>
                        <li>
                            <i></i>
                            <p>白条</p>
                        </li>
                    </ul>
                </div>

css代码：
/* 生活服务模块 */
.newsflash .lifeservice{
    height: 210px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top: 0;
    /* 将超出盒子的内容隐藏 */
    overflow: hidden;
}
.lifeservice ul {
    /*如果li不能在一行排满，宽度超出了lifeservice盒子 */
    width: 252px;
    height: 100%;
}

.lifeservice ul li{
    float: left;
    width: 63px;
    height: 70px;
    /* text-align：center只对行内元素和行内块元素有效！ */
    text-align: center;
    /* background-color:pink; */
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
}
.lifeservice  li i{
    display: inline-block;    
    width: 26px;
    height: 25px;
    /* background-color: rgb(14, 2, 4); */
    margin-top: 13px;
    background: url('../imgs/jingling2.png') no-repeat;
}

javascript代码段：

 // 循环设置lifeservice里面的i标签的精灵图为背景图标
    /* 1.获取所有i 会形成伪数组  */
    var icons = document.querySelector('.lifeservice').querySelectorAll('i');
    // console.log(icons);
    /* 2.使用for循环来设置每个li的背景图 */
    var countX = 0;
    var countY = 0;
    for (var i = 0; i < icons.length; i++) {
        // 通过设置精灵图的x和y坐标来设置不同li的背景图
        // console.log(icons.length);
        var index_x = countX * 62;
        var index_y = countY * 72;
        icons[i].style.backgroundPosition = '-' + index_x + 'px  -' + index_y + 'px';
       //console.log(index_x);
        //console.log(index_y);
        countX++;
        if ((i + 1) % 4 == 0) {
            countX = 0;
            countY++;
        }
    }