移动端循环精灵图背景做法

 这种布局方式是移动端经常出现的一种布局，对于他的做法，你是否还有疑惑不知从何下手呢？

精灵图样式

 

 

整体思路分析

       一、 HTML框架

        1、ul里面套li，使用浮动或者flex布局，flex布局注意换行问题（本次使用flex布局）

        2、li里面分为图像和文字两部分，分别是pic/text

        二、CSS部分

        1、内容撑起来宽度，里面也可以用flex布局，记得改换主轴方向，但是注意pic/text之间需要一个高度

        2、pic里面的图像位置注意，是需要和JS交互的

        三、JS部分

        1、精灵图排列有规律，0,44,88等

        2、记得获取元素

        3、可以使用for循环进行遍历，修改精灵图位置

        4、规律就是索引*44是每个图片的Y坐标

代码参考 

别问为什么拆开写，不拆开就被提示不合规范，，，，服了，有需要的直接套用组合就行，放到合适位置

1、整体结构部分

 <ul>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">充话费</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">旅行</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">车险</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">游戏</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">彩票</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">电影</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">酒店</span>
            </a></li>
        <li>
            <a href="#">
                <span class="pic"></span>
                <span class="text">理财</span></a></li>
    </ul>

2、CSS样式部分 

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        li {
            list-style: none;
        }

        span {
            display: block;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            margin: 100px auto;
        }

        li {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 80px;
            border: 1px solid #eee;
            margin-right: -1px;
            margin-bottom: -1px;
        }

        li:first-child {
            border-right: 0;
        }

        li:nth-child(5) {
            border-right: 0;
        }

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .pic {
            width: 24px;
            height: 24px;
            margin-bottom: 5px;
            background: url(../课堂练习/images/sprite.png) no-repeat;
        }

        .text {
            font-size: 14px;
        }
    </style>

3、JS交互部分

 <script>
        var a = document.getElementsByTagName('a');
        var pics = document.querySelectorAll('.pic');
        for (var i = 0; i < pics.length; i++) {
            var index = i * 44;
            pics[i].style.backgroundPosition= '0 -' + index+'px';
        }
    </script>