循环精灵图

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

错言语

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

阅读量213

点赞数 1

本文链接：https://blog.csdn.net/qq_46150052/article/details/121026916

版权

案例同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

DOM

14 篇文章 0 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

循环精灵图背景

首先精灵图图片排列有规律的
核心思路：利用for循环修改精灵图片的背景位置 background-position
让循环里面的 i 索引号 * 44 就是每个图片的y坐标

效果图：

在这里插入图片描述

实现代码：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <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>

背景图片：

在这里插入图片描述

错言语

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
循环精灵图

循环精灵图背景首先精灵图图片排列有规律的核心思路：利用for循环修改精灵图片的背景位置 background-position让循环里面的 i 索引号 * 44 就是每个图片的y坐标效果图：实现代码：<style> * { margin: 0; padding: 0; } li { list-style-type: non
复制链接

扫一扫