可以利用for循环设置一组元素的精灵图背景。
循环精灵图背景.png

案例分析：

①首先精灵图排列时有规律的。
②核心思路：利用for循环，修改精灵图片的背景位置background-position
③剩下的就是考验你的数学功底了。
④让循环里的i索引号*44就是每个图片的y坐标。

  1. <style><br />        *{<br />            margin: 0;<br />            padding: 0;<br />        }<br />        li{<br />            list-style-type: none;<br />        }<br />        .box{<br />            width: 250px;<br />            margin: 100pxauto;<br />        }<br />        .box>ul>li{<br />            width: 24px;<br />            height: 24px;<br />            /* background-color: pink; */<br />            margin: 15px;<br />            float: left;<br />            background-image: url(./img/img一、4.09/sprite.png);<br />            background-repeat: no-repeat;<br />        }<br />    </style><br /></head><br /><body><br />    <div class="box"><br />        <ul><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />            <li></li><br />        </ul><br />    </div><br />    <script><br />        //获取元素<br />        var lis = document.querySelectorAll('li');<br />        //循环遍历li元素，每个背景图的位置规律性改变<br />        for(var i = 0; i < lis.length; i++){<br />            var index = i * 44;<br />            lis[i].style.backgroundPositionY = '-' + index + 'px';<br />        }<br />    </script><br /></body>

.