JavaScript实现精灵图效果_js精灵图-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51938823/article/details/131690741

JavaScript实现精灵图效果

精灵图就是图片拼合技术，它就是把多张小图合成一张大图，通过css中的background-position属性，显示精灵图中某一个小图标。

先构造好DOM元素节点
利用CSS写好样式（特别是将精灵图设为li的背景图）
计算测量好每一个图案的高度
利用获取DOM元素节点，即获取所有的li
循环遍历li并设置背景位置

1. 构造好DOM元素节点

 <div class="sprite">
        <ul>
        // 因为精灵图有14个图案 所以设置了14个li
            <li></li>
            <li></li>
            <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>

2. 利用CSS写好样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    .sprite{
        width: 250px;
        margin: 100px auto;
    }
    .sprite li{
        float: left;
        width: 30px;
        height: 30px;
        margin: 15px;
        /* 设置精灵图为背景 */
        background: url(images/sprite.png) no-repeat;
    }
</style>

3. 计算测量好每一个图案的高度

利用截图工具可以知道精灵图的每一个图案高度为44px。

4. 利用获取DOM元素节点，即获取所有的li

 // 1 获取所有的li
        var lis = document.querySelectorAll('li')

5. 循环遍历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'
        }

6. 效果展示

效果展示

7. 整个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;
    }
    .sprite{
        width: 250px;
        margin: 100px auto;
    }
    .sprite li{
        float: left;
        width: 30px;
        height: 30px;
        margin: 15px;
        /* 设置精灵图为背景 */
        background: url(images/sprite.png) no-repeat;
    }
    

</style>
<body>
    <div class="sprite">
        <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>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        // 精灵图就是图片拼合技术，它就是把多张小图合成一张大图，
        // 通过css中的background-position属性，显示精灵图中某一个小图标。

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