循环精灵图案例

循环精灵图案例

第一种：精灵图竖行排列

注意：每个精灵图顶部之间的的距离是44px，索引号×44px就是每个li 的背景y坐标

<script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

第二种：精灵图按照长方形排列

注意：按照行来划分精灵图，每一行的Y坐标相同，主要是x坐标不同，注意寻找规律。

 <script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
        //这里的i不能等于4
            if (i < 4) {
                lis[i].style.backgroundPositionX = -(i * 63 + 15) + 'px';
                lis[i].style.backgroundPositionY = -14 + 'px';
            } else if (i < 8) {
                lis[i].style.backgroundPositionX = -((i - 4) * 63 + 15) + 'px';
                lis[i].style.backgroundPositionY = -87 + 'px';
            } else {
                lis[i].style.backgroundPositionX = -((i - 8) * 63 + 15) + 'px';
                lis[i].style.backgroundPositionY = -158 + 'px';
            }
        }
    </script>