拼客JavaScript的P211-循环精灵图
JavaScript前端课程-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续
视频中的拼客老师使用的是淘宝首页的精灵图资源24-595图片
精灵图24-595
我还找到另一张大一点的精灵图，内容一样但是尺寸大一倍的48-1194图片，可以用于后续的练习
精灵图48-1194
文件树结构（使用对应的24-595精灵图）
操作元素
->imgs
->tb-jinglingtu-24-595.png
->09-循环精灵图.html
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-循环精灵图.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
/*background-color: pink;*/
margin: 15px;
background: url("imgs/tb-jinglingtu-24-595.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');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
