前端：JS之for循环取得雪碧图的Y坐标
本帖最后由 clearwater 于 2020-3-4 12:11 编辑以下代码是我基本上照抄某前端视频教程。本节课的是讲如何利用for 循环，来取得雪碧图的坐标。
#56-57行是老师的原版代码，我打算做个改良，所以被我注释掉。
#53-54行是我的改良版，但是出错了。第一个图标不见。我猜是53行代码，0*-44出了问题。可是数学里，不是0乘以任何数都为0吗？为啥第一个图显示不出来呢？{:1_904:}
链接：https://pan.baidu.com/s/1UfLTVz3CpeNjbhmnBYru2w
提取码：ppdb
代码和图片在百度盘中
<!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.style.backgroundPosition = '0' + index +'px';
/* var index = i * 44;
lis.style.backgroundPosition = '0 -' + index + 'px'; */
}
</script>
</body>
</html> lis.style.backgroundPosition = '0 ' + index +'px';
0后面加一个空格 本帖最后由 小菜鸟一枚 于 2020-3-4 11:42 编辑
我怎么感觉这是在字符串拼接，不是数学运算，不懂JavaScript，路过，随意插一句嘴，大师勿怪哈，我学的是c++。:lol
我刚去百度了一下，猜测，坐标轴左上角是0,0，往右下那就是是负数
backgroundPosition这个属性设置两个值，中间空格隔开。
‘0 -’他是字符串，应该没办法自己转化成数字做数学运算吧？
连接后就是0 -44px
而大师的连接后是 0-44px，没有空格隔开！
<script>
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
var index = i * (-44);
lis.style.backgroundPosition = '0 ' + index +'px';
console.log(lis.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.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> 这是字符串拼接。。你'0'+index+'px'就变成了 00px老师的是0 0px
所以你的没生效 因为background-position要两个参数吧https://www.runoob.com/cssref/pr-background-position.html wangchuanlin 发表于 2020-3-4 11:24
lis.style.backgroundPosition = '0 ' + index +'px';
0后面加一个空格
谢谢大神指点。之前没想到。
但是为啥后面的没有空格可以正确显示的呢？
0-44，
0-88
{:1_893:} 本帖最后由 clearwater 于 2020-3-4 11:38 编辑
小菜鸟一枚 发表于 2020-3-4 11:27
我怎么感觉这是在字符串拼接，不是数学运算，不懂JavaScript，路过，随意插一句嘴，大师勿怪哈，我学的是c+ ...
大神，是在拼字符串啊
{:1_893:}
@小菜鸟一枚
厉害了。但是后面为啥可以显示？
0-44，0-88 background的position属性在只给定一个值的情况下，其他值默认是center，你的第一个值(0-0px)相当于（0 center），而老师的是(0 -0px)，中间有一个空格,是两个值。
你和老师的两个值是不一样的 clearwater 发表于 2020-3-4 11:32
谢谢大神指点。之前没想到。
但是为啥后面的没有空格可以正确显示的呢？
是x轴 和y轴之间要有个空格不是说每个后面都需要空格你在css样式表里写的时候x和y之间不写空格吗 clearwater 发表于 2020-3-4 11:33
大神，是在拼字符串啊
我觉得按照c语言的学习，变量输出不对，就给他debug记录一下，看看输出结果是否符合预期。
大师也加油，一起学好一门编程语言！:handshake 本帖最后由 打工仔-知恩 于 2020-3-4 11:58 编辑
老哥你不妨从for循环中那个let入手，let i=1，开始就对了
页:
[1]
2