码迷,mamicode.com
首页 > 其他好文 > 详细

循环精灵图案例

时间:2020-06-01 12:08:37      阅读:48      评论:0      收藏:0      [点我收藏+]

标签:height   ons   获取   背景   position   ora   dev   charset   案例   

<!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 {
            width: 50px;;
            margin: 100px auto;
        }
        .box li {
            float: left;
            width: 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>

 

循环精灵图案例

标签:height   ons   获取   背景   position   ora   dev   charset   案例   

原文地址:https://www.cnblogs.com/qiujie-prion/p/13024125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!