js写精灵图

最新推荐文章于 2022-11-03 13:47:15 发布

十年4646454sdg5sagsa

最新推荐文章于 2022-11-03 13:47:15 发布

阅读量946

点赞数

分类专栏： web前端 js 文章标签： js

本文链接：https://blog.csdn.net/a12336487213/article/details/104778935

版权

web前端同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

47 篇文章 0 订阅

订阅专栏

精灵图主要通过lis[i].style.backgroundPosition = “0 -”+ i*44 + “px”;截取需要的图标。
第一个参数0，是left，第二个参数是top，所以是负的

    <title>Document</title>
    <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
    let lis = document.querySelectorAll('li');
    for(let i=0; i<lis.length; i++){
        lis[i].style.backgroundPosition = "0 -"+ i*44 + "px";
    }
</script>
</body>

十年4646454sdg5sagsa

关注

0
点赞
踩
1

收藏

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

精灵图主要通过lis[i].style.backgroundPosition = “0 -”+ i*44 + “px”;截取需要的图标。 <title>Document</title> <style> * { margin: 0; padding: 0; } ...
复制链接

扫一扫