js小demo3（淘宝循环精灵图背景）

最新推荐文章于 2023-06-07 23:36:03 发布

-恰饭第一名-

最新推荐文章于 2023-06-07 23:36:03 发布

阅读量976

点赞数

分类专栏： JavaScript js小demo 学习笔记文章标签： js css html

本文链接：https://blog.csdn.net/weixin_46334272/article/details/114336410

版权

学习笔记同时被 3 个专栏收录

151 篇文章 8 订阅

订阅专栏

JavaScript

54 篇文章 8 订阅

订阅专栏

js小demo

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .box {
        width: 300px;
        list-style: none;
        margin: 60px auto;
    }
    
    li {
        float: left;
        width: 35px;
        height: 35px;
        margin: 15px;
        background-color: pink;
        background: url(sprite.png) no-repeat;
    }
</style>

<body>
    <ul class="box">
        <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>
</body>
<script>
   // 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>

在这里插入图片描述

-恰饭第一名-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js小demo3（淘宝循环精灵图背景）

<style> * { margin: 0; padding: 0; } .box { width: 300px; list-style: none; margin: 60px auto; } li { float: left; width: 35px; height: 35px; marg..
复制链接

扫一扫

专栏目录