CSS3 进阶，循环精灵图技术

最新推荐文章于 2024-08-10 16:57:53 发布

magician21##

最新推荐文章于 2024-08-10 16:57:53 发布

阅读量108

点赞数

分类专栏： CSS3合集文章标签： for循环精灵图 backgroundPosition CSS动画 li元素

本文链接：https://blog.csdn.net/weixin_48927774/article/details/120779721

版权

CSS3合集专栏收录该内容

12 篇文章 0 订阅

订阅专栏

案例分析

利用for循环，修改精灵图的backgroundPosition

代码及实例

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 230px;
            margin: 100px auto;
            height: 100px;
        }
        ul li{
            float: left;
            width: 24px;
            height: 24px;
            background: url(jing.png) no-repeat;
            list-style: none;//去除无序列表前的点
            margin: 15px;
        }
    </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');
        for(var i=0;i<lis.length;i++){
            var index=i*44;
            lis[i].style.backgroundPosition='0 -'+index+'px';//重点！！！
        }
    </script>
</body>
</html>

#实际效果

在这里插入图片描述

magician21##

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 进阶，循环精灵图技术

案例分析利用for循环，修改精灵图的backgroundPosition代码及实例<style> *{ margin: 0; padding: 0; } .box{ width: 230px; margin: 100px auto; height: 100px; } ul li{
复制链接

扫一扫

专栏目录