网页中精灵图的妙用

短命女 2023-02-12 06:28 34阅读 0赞

## 精灵图的妙用 ##

相信很多小伙伴儿，对精灵（雪碧）图并不陌生。精灵图大多为小图标的形式（经美工处理）。说来话长，这图在网页上大面积应用时是真的很烦（代码冗余度很高），那么这篇文章就用js实现精灵图的快速渲染。

*  整张图片looklook

1.  页面效果（淘宝原图）  
    ![在这里插入图片描述][2020052510410747.PNG]
2.  背景图片（此图为淘宝服务扩展模块精灵图）  
    ![在这里插入图片描述][2020052510325420.png]
3.  找出其中规律  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]  
    **总结**：每个小图标之间y轴相差44px（且为负值）

### OK展示 ###

*  效果预览：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]
 *  js处理定位（细节处含注释）：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .box { 
                height: 165px;
                width: 220px;
                margin: 100px auto;
            }
            
            li { 
                list-style: none;
                height: 24px;
                width: 24px;
                margin: 15px;
                float: left;
                background: url('./img/淘宝.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>
            // 获取元素
            var lis = document.querySelectorAll('li');
            // 遍历所有的li
            for (var i = 0; i < lis.length; i++) { 
                // 精灵图竖着排列，且间隔为44px
                // 索引*44为每个小图标的y坐标
                var index = i * 44;
                // 给每个li加上自己的图片的位置定位
                lis[i].style.backgroundPosition = '0px -' + index + 'px'
            }
        </script>
    </body>
    
    </html>

*  平时的css对背景进行定位（代码冗余度过高）：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            
            .box { 
                height: 165px;
                width: 220px;
                margin: 100px auto;
            }
            
            li { 
                list-style: none;
                height: 24px;
                width: 24px;
                margin: 15px;
                float: left;
                background: url('./img/淘宝.png') no-repeat;
            }
            
            li:nth-child(2) { 
                background-position: 0 -44px;
            }
            
            li:nth-child(3) { 
                background-position: 0 -88px;
            }
            
            li:nth-child(4) { 
                background-position: 0 -132px;
            }
            
            li:nth-child(5) { 
                background-position: 0 -176px;
            }
            
            li:nth-child(6) { 
                background-position: 0 -220px;
            }
            
            li:nth-child(7) { 
                background-position: 0 -264px;
            }
            
            li:nth-child(8) { 
                background-position: 0 -308px;
            }
            
            li:nth-child(9) { 
                background-position: 0 -352px;
            }
            
            li:nth-child(10) { 
                background-position: 0 -396px;
            }
            
            li:nth-child(11) { 
                background-position: 0 -440px;
            }
            
            li:nth-child(12) { 
                background-position: 0 -484px;
            }
        </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>
    </body>
    
    </html>

##### 代码量一目了然：快上手试试吧 #####

[2020052510410747.PNG]: https://img-blog.csdnimg.cn/2020052510410747.PNG
[2020052510325420.png]: https://img-blog.csdnimg.cn/2020052510325420.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200525111302939.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200525111327317.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200525112037140.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8=,size_16,color_FFFFFF,t_70