案例:使用for循环设置一组元素的精灵图背景

精灵图的每个小图标的坐标都是有规律的。

<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;
        // 注意,拼接字符串后得到的是,例如:0 -44px
        lisp[i].style.backgroundPosition = '0 -' + index + 'px';
    }
</script>

 

posted @ 2020-05-21 22:23  浮华夕颜  Views(427)  Comments(0Edit  收藏  举报