循环精灵图的js代码块

最新推荐文章于 2024-02-29 21:06:28 发布

小周码代码

最新推荐文章于 2024-02-29 21:06:28 发布

阅读量513

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/tangyuan97/article/details/104029650

版权

js 专栏收录该内容

13 篇文章

订阅专栏

<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>
        </ul>
    </div>
    <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>