循环精灵图效果(很多购物图标)

最新推荐文章于 2022-11-28 13:38:55 发布

奇葩之小王子

最新推荐文章于 2022-11-28 13:38:55 发布

阅读量187

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_52138438/article/details/114983662

版权

循环精灵图效果
在这里插入图片描述
要做到这样的效果首先拿到的是一张这样的图

我们要做的就是把这张竖直的图片变成3X4的图片

<!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>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(taobao.PNG) no-repeat;
        }
    </style>
</head>
<body>
 //先打出3X4的小格子  把每张长图都引入到小格子内 再通过for来修改每个的位置
    <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++)
        { 
            // 让索引号乘以44 就是每个li的背景y坐标 index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' +index+ 'px';
        }
    </script>
</body>
</html>

主要思想，明白每个小图片之间的距离为44px 可以测得然后让它的y坐标挨个修改到对应图标上

奇葩之小王子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
循环精灵图效果(很多购物图标)

循环精灵图效果要做到这样的效果首先拿到的是一张这样的图我们要做的就是把这张竖直的图片变成3X4的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
复制链接

扫一扫