核心思路

<!-- 首先精灵图图片是有规律的

    核心思路：利用for循环修改精灵图片的背景位置 

    让循环里的i索引号*44就是每个图的y坐标-->

    <div class="box">

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

JavaScript代码如下

<script>

    // 获取元素li

    var lis = document.querySelectorAll('li');

    for (var i = 0; i < lis.length; i++) {

        // 让索引号乘以44就是每个li的背景y坐标 indedx就是y坐标

        var index = i * 44;

        lis[i].style.backgroundPosition = '0 -' + index + 'px';

    }

</script>