zoukankan      html  css  js  c++  java
  • 循环精灵图

    可以利用 for 循环设置一组元素的精灵图背景
     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style-type: none;
            }
    
            .box {
                 250px;
                margin: 100px auto;
            }
            .box li {
                float: left;
                 24px;
                height: 24px;
                background-color: pink;
                margin: 15px;
                background: url(image/sprite.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>
        //1 获取元素 所有的小li
        var lis = document.querySelectorAll('li');
        console.log(lis);
        for (var i = 0; i < lis.length; i++) {
            //让索引号 乘以 44 就是每个li的背景y坐标 index就是我们的y坐标
            var index  = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
                                         // = ’x坐标 y坐标‘  空格 和 负号必须保留
        }
    </script>
    </body>
    </html>

  • 相关阅读:
    http协议
    三次握手四次挥手的原理
    mmap
    I/O多路复用之poll
    I/O多路转接之select
    自旋锁、文件锁、大内核锁
    网络基础(一)
    线程同步之(信号量)
    进程与线程的简单理解
    内存溢出——程序员必备网站
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14440095.html
Copyright © 2011-2022 走看看