• 热点推荐:
 首页 / web案例 / 正文
javascript利用for循环精灵图背景-js技巧

Time:2021年08月19日 Read:216 评论:0 作者:小天老师

有些东西学得快,忘记得也快,还不如想起的时候顺手记录下来。比如这个精灵图~!在photoshop中从上往下有规律的排列好位置,然后直接使用for循环依次打印出精灵图中每一张小图片的位置就好了backgroundPosition; 这张精灵图每一张图片的间距是44像素,总共12张小图片,用for循环,索引号是0~11;距离计算就是 索引号*44就可以了。

原生js DOM操作精灵图

<!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>精灵图-传授PC网</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        ul {
            width: 190px;
            margin: 100px auto 0;
        }
        
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            margin: 0 10px 10px 0;
            list-style: none;
            background: url(https://www.pcimg5566.com/csscase02/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <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>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            var index = i * 44
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>
标签:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图