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

红星编程实验室

已于 2024-02-29 21:13:54 修改

阅读量267

点赞数 1

分类专栏：前端研究院文章标签： javascript

于 2024-02-29 21:06:28 首次发布

本文链接：https://blog.csdn.net/weixin_45325204/article/details/136380751

版权

前端研究院专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在黑马Pink老师的前端视频教程中，利用JavaScript和HTML/CSS创建一个动态的精灵图效果，通过循环改变列表项的背景位置来实现淘宝首页风格的24-595精灵图。

摘要由CSDN通过智能技术生成

拼客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>