精灵图

最新推荐文章于 2024-09-09 22:16:15 发布

Templar136

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量193

点赞数

分类专栏： WEB前端学习文章标签： html js

本文链接：https://blog.csdn.net/Templar136/article/details/114478579

版权

WEB前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用CSS精灵图技术展示多个小图标。通过设置li元素的宽高、浮动、背景图片及位置，结合JavaScript动态调整背景图片的位置，实现每个li元素显示不同的小图标。精灵图PNG中图标之间的间距为44px，利用这一特性，通过-i*44px计算背景位置，确保正确显示14个图标。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

使用的图片如下

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        *{
            padding: 0px;
            /* 消除<li>标签左边空白 */
        }
        #box{
            width: 496px;
            margin: 100px auto;
            height: 1000px;
        }
        #box ul{
            /* 消除<li>标签上边空白 */
            margin: 0px;
        }
        #box li{
            
            width: 24px;
            height: 24px;
            float: left;
            margin:50px;
            background-image: url("image/jinglingtu.png");
            list-style-type:none;
            background-position: 0 -50px;
            background-repeat: no-repeat;
            
        }
    </style>
</head>
<body>
    <div id="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>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis=document.querySelectorAll("li");
        for(var i=0;i<lis.length;i++)
        {
            var index=i*44;
            lis[i].style.backgroundPosition="0 -"+index+"px"
        }
    </script>
</body>
</html>

先设置每个精灵图的li标签宽高为24px，左浮动，取消无序列表前面的点，设置不平铺。
所有的li标签都使用同一张png图片做为背景，经过对position的设置实现每个li标签背景应用对应的小图标
经过分析得到png图片中上一个小图片上沿到下一个小图片上沿的距离为44px，所以在js中让每个li标签背景图片的position的y坐标为
-i*44px(i=0,1,…,13),这样就可以使每个li标签显示对应的小图标