JavaScript | 拼客JavaScript的P211-循环精灵图精灵图及个人手敲代码分享

本文主要是介绍JavaScript | 拼客JavaScript的P211-循环精灵图精灵图及个人手敲代码分享，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

拼客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. 获取元素 所有的小livar 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>

这篇关于JavaScript | 拼客JavaScript的P211-循环精灵图精灵图及个人手敲代码分享的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！