前端：JS之for循环取得雪碧图的Y坐标

clearwater · 发表于 2020-3-4 10:54

本帖最后由 clearwater 于 2020-3-4 12:11 编辑

以下代码是我基本上照抄某前端视频教程。本节课的是讲如何利用for 循环，来取得雪碧图的坐标。

#56-57行是老师的原版代码，我打算做个改良，所以被我注释掉。

#53-54行是我的改良版，但是出错了。第一个图标不见。我猜是53行代码，0*-44出了问题。可是数学里，不是0乘以任何数都为0吗？为啥第一个图显示不出来呢？

链接：https://pan.baidu.com/s/1UfLTVz3CpeNjbhmnBYru2w
提取码：ppdb
代码和图片在百度盘中

[JavaScript] 纯文本查看 复制代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style-type: none;
        }
        .box {
            /* //　没有高度就显示不出来 , css不能用双杠来注释*/
            width: 250px; 
            margin: 100px auto;
            background-color: pink;
        }
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            margin: 15px;
            background-color: pink;
            background: url(images/sprite.png) no-repeat;
        }
        
    </style>
</head>
<body>
    <div class="box2"></div>
    <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>
        var lis = document.querySelectorAll('li');
        for(var i = 0; i < lis.length; i++) {
            var index = i * -44;
            lis[i].style.backgroundPosition = '0' + index +'px';

            /* var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px'; */
        }
    </script>
</body>
</html>

clddup · 发表于 2020-3-4 11:24

lis[i].style.backgroundPosition = '0 ' + index +'px';
0后面加一个空格

小菜鸟一枚 · 发表于 2020-3-4 11:27

本帖最后由小菜鸟一枚于 2020-3-4 11:42 编辑

我怎么感觉这是在字符串拼接，不是数学运算，不懂JavaScript，路过，随意插一句嘴，大师勿怪哈，我学的是c++。

我刚去百度了一下，猜测，坐标轴左上角是0,0，往右下那就是是负数
backgroundPosition这个属性设置两个值，中间空格隔开。
‘0 -’他是字符串，应该没办法自己转化成数字做数学运算吧？
连接后就是0 -44px
而大师的连接后是 0-44px，没有空格隔开！

[JavaScript] 纯文本查看 复制代码

    <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';
                        console.log(lis[i].style.backgroundPosition = '0 ' + index + 'px');
                        /*00px
12.html:55 0-44px
12.html:55 0-88px
12.html:55 0-132px
12.html:55 0-176px
12.html:55 0-220px
12.html:55 0-264px
12.html:55 0-308px
12.html:55 0-352px
12.html:55 0-396px
12.html:55 0-440px
12.html:55 0-484px*/
            var index = i * 44;
                        
            lis[i].style.backgroundPosition = '0' + index + 'px'; 
                        /* 0 -0px
                                12.html:69 0 -44px
                                12.html:69 0 -88px
                                12.html:69 0 -132px
                                12.html:69 0 -176px
                                12.html:69 0 -220px
                                12.html:69 0 -264px
                                12.html:69 0 -308px
                                12.html:69 0 -352px
                                12.html:69 0 -396px
                                12.html:69 0 -440px
                                12.html:69 0 -484px */
        }
    </script>

linguo2625469 · 发表于 2020-3-4 11:31

这是字符串拼接。。你'0'+index+'px' 就变成了 00px 老师的是 0 0px
所以你的没生效因为background-position要两个参数吧 https://www.runoob.com/cssref/pr-background-position.html

clearwater · 发表于 2020-3-4 11:32

wangchuanlin 发表于 2020-3-4 11:24
lis.style.backgroundPosition = '0 ' + index +'px';
0后面加一个空格

谢谢大神指点。之前没想到。

但是为啥后面的没有空格可以正确显示的呢？

0-44，
0-88

clearwater · 发表于 2020-3-4 11:33

本帖最后由 clearwater 于 2020-3-4 11:38 编辑

小菜鸟一枚发表于 2020-3-4 11:27
我怎么感觉这是在字符串拼接，不是数学运算，不懂JavaScript，路过，随意插一句嘴，大师勿怪哈，我学的是c+ ...

大神，是在拼字符串啊

@小菜鸟一枚

厉害了。但是后面为啥可以显示？

0-44，0-88

wuyujiesong · 发表于 2020-3-4 11:34

background的position属性在只给定一个值的情况下，其他值默认是center，你的第一个值(0-0px)相当于（0 center），而老师的是(0 -0px)，中间有一个空格,是两个值。
你和老师的两个值是不一样的

clddup · 发表于 2020-3-4 11:38

clearwater 发表于 2020-3-4 11:32
谢谢大神指点。之前没想到。

但是为啥后面的没有空格可以正确显示的呢？

是x轴和y轴之间要有个空格不是说每个后面都需要空格你在css样式表里写的时候x和y之间不写空格吗

小菜鸟一枚 · 发表于 2020-3-4 11:38

clearwater 发表于 2020-3-4 11:33
大神，是在拼字符串啊

我觉得按照c语言的学习，变量输出不对，就给他debug记录一下，看看输出结果是否符合预期。
大师也加油，一起学好一门编程语言！

打工仔-知恩 · 发表于 2020-3-4 11:47

本帖最后由打工仔-知恩于 2020-3-4 11:58 编辑

老哥你不妨从for循环中那个let入手，let i=1，开始就对了

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 前端：JS之for循环取得雪碧图的Y坐标

免费评分

免费评分

免费评分

免费评分