• 案例:循环精灵图案例


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                 50px;;
                margin: 100px auto;
            }
            .box li {
                float: left;
                 20px;
                height: 20px;
                background-color: pink;
                margin: 15px;
                background: url(OIP.jpg) 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>
            <script>
                //1.获取元素
                var lis = document.querySelectorAll('li');
                for(var i = 0 ; i<lis.length ;i++)
                {
                    //让索引号乘以44 就是每个li的背景坐标 //index就是我们的y坐标
                    var index = i*44;
                    lis[i].style.backgroundPosition = '0 -'+index+'px';
                    console.log(lis[i].style.backgroundPosition);
                    
                }
            </script>
        </div>
    </body>
    </html>
  • 相关阅读:
    css半透明边框
    css脱离文档流
    margin负值的作用
    浅谈BFC
    css多列布局
    css布局--水平垂直居中
    css布局--垂直居中
    css布局--水平居中
    题解-APIO2019奇怪装置
    题解-AtCoder ARC-078F Mole and Abandoned Mine
  • 原文地址:https://www.cnblogs.com/qiujie-prion/p/13024125.html
Copyright © 2020-2023  润新知