淘宝精灵图循环

最新推荐文章于 2023-05-09 01:06:11 发布

秃头的小猿

最新推荐文章于 2023-05-09 01:06:11 发布

阅读量883

点赞数 5

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_45749629/article/details/124892119

版权

案例要用到的图片：右键--选择图片另存为可保存。

案例分析：

首先由于精灵图图片排列是有规律的
核心思路：利用for循环修改精灵图片的背景位置 background-position
让循环里面的 i 索引号*44就是每个图片的 y 坐标

案例源码：

<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: red;
            margin: 15px;
            background: url(taobaoBackground.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');
        for (var i = 0; i < lis.length; i++) {
            var y = -44 * i;
            lis[i].style.backgroundPosition = '0 ' + y + 'px';
        }
    </script>
</body>

</html>

最终实现的效果：