JavaScript实现遍历精灵图的效果

问题描述:通过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;}#box {width: 230px;height: 270px;}#box ul {width: 100%;height: 100%;list-style: none;}#box li {width: 70px;height: 90px;display: block;float: left;text-align: center;}span {width: 24px;height: 44px;display: inline-block;}</style>
</head><body><div id="box"><ul></ul></div><script>var box = document.querySelector('#box');var arr = ['企业购', '礼品卡', '话费', '机票', '游戏', '白条', '火车票', '加油卡', '五金城', '电影票', '酒店', '云建站'];var html = '';for (var i = 0; i < arr.length; i++) {html +=`<li><span style='background:url(./sprite.png) no-repeat 0px -${i*43}px'></span><p>${arr[i]}</p></li>`}var ul = document.querySelector('ul');ul.innerHTML = html;</script>
</body></html> 

效果图: 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux下任务管理工具--crontab

1. crontab是什么 crontab的服务进程名为crond&#xff0c;英文意为周期任务。 通常安装操作系统后&#xff0c;默认已启动crond服务。crontab可理解为cron_table&#xff0c;表示cron的任务列表。 2. 基本命令选项 crontab -e // 打开crontab任务编辑 -u 选项 指定某用…

为什么猫咪主食冻干价格相差那么大?性价比高的主食冻干分享

养猫知识的不断普及&#xff0c;让主食冻干喂养逐渐受到铲屎官的青睐。但价格仍是部分铲屎官的顾虑。像我这样的资深猫友&#xff0c;早已开始尝试主食冻干喂养。虽然价格稍高&#xff0c;但其为猫咪带来的实际好处是远超其价格的。 作为一个多猫家庭的铲屎官&#xff0c;纯主食…

1040 有几个PAT1045 快速排序

1040 description 字符串 APPAPT 中包含了两个单词 PAT&#xff0c;其中第一个 PAT 是第 2 位&#xff0c;第 4 位(A)&#xff0c;第 6 位(T)&#xff1b;第二个 PAT 是第 3 位&#xff0c;第 4 位(A)&#xff0c;第 6 位(T)。 现给定字符串&#xff0c;问一共可以形成多少个…

使用Echarts绘制中国七大区地图

先上效果图&#xff08;文字是否显示&#xff0c;显示什么字&#xff0c;各种颜色之类的&#xff0c;都能随便改&#xff09; 直接上完整代码 <!DOCTYPE html> <html style"height: 100%"><head><meta charset"utf-8" /></hea…

js的偏函数和柯里化

偏函数和柯里化都是JavaScript中的函数技术&#xff0c;用于创建新的函数。 偏函数和柯里化都是JavaScript中的函数技术&#xff0c;用于创建新的函数。 1、偏函数&#xff08;Partial Function&#xff09;是指通过固定函数的一部分参数&#xff0c;从而创建一个新的函数。这…

[最佳实践] Windows上构建一个和Linux类似的Terminal

感谢大佬批评指正&#xff0c;现已更新 preview Target&#xff1a;致力打造最赏心悦目Window下的终端&#xff0c;同时能够很接近Linux的使用习惯 key word&#xff1a;windows终端美化 windows terminal windows powershell 类似Linux下的Window终端 Window也能用ll windows…

如何减少AI中的偏见问题:八种方法避免AI偏见渗入模型

克服与避免 AI 偏见的八大方法 AI 中的算法偏见是一个普遍存在的问题&#xff0c;它虽然不可能完全消除&#xff0c;但却可以通过科学的方法积极地防止这种偏见。我们将在本文中围绕如何应对AI中的偏见问题展开深入的讨论。 您可能会回想起新闻中报道的一些存在偏见的算法示例…

JavaScript编程艺术:深度解析计算机程序的构造与解释【文末送书-32】

文章目录 JavaScript编程艺术&#xff1a;深度解析计算机程序的构造与解释第一部分&#xff1a;程序的构造第二部分&#xff1a;程序的解释第三部分&#xff1a;实例分析 计算机程序的构造和解释&#xff08;JavaScript版&#xff09;【文末送书-32】 JavaScript编程艺术&#…

795. 前缀和(acwing)

文章目录 795.前缀和题目描述前缀和 795.前缀和 题目描述 输入一个长度为n的整数序列。 接下来再输入m个询问&#xff0c;每个询问输入一对l, r。 对于每个询问&#xff0c;输出原序列中从第l个数到第r个数的和。 输入格式 第一行包含两个整数n和m。 第二行包含n个整数&a…

利用MATLAB模拟点电荷的电场分布

一、实验目的&#xff1a; 1&#xff0e;熟悉点电荷的电场分布情况&#xff1b; 2&#xff0e;学会使用Matlab绘图&#xff1b; 二、实验内容&#xff1a; 1&#xff0e;根据库伦定律&#xff0c;利用Matlab强大的绘图功能画出单个点电荷的电场分布情况&#xff0c;包括电力…

小型园区配置示例——华为

小型园区配置示例 组网图形 图1 小型园区组网图 组网需求数据规划配置思路操作步骤业务验证 组网需求 某企业划分为A、B两个部门&#xff0c;企业中的用户可以相互访问&#xff0c;并且企业中的用户可访问Internet。 如图1所示&#xff0c;在小型园区中&#xff0c;S2700…

idea2023版使用废弃类没有删除线处理方法

idea2023版使用废弃类没有删除线处理方法 新版Idea使用废弃类时,默认是黄色警告处理方法1. 打开file -> setting2. 编辑(Editor) -> 检查(Inspections) -> 搜索Deprecated API usage 新版Idea使用废弃类时,默认是黄色警告 处理方法 1. 打开file -> setting 2. 编…

【树】-Lc102-二叉树的层次遍历(队列)

写在前面 最近想复习一下数据结构与算法相关的内容&#xff0c;找一些题来做一做。如有更好思路&#xff0c;欢迎指正。 目录 写在前面一、场景描述二、具体步骤1.环境说明2.代码 写在后面 一、场景描述 给定一个二叉树&#xff0c;返回其按层次遍历的节点值。&#xff08;即逐…

单点登录是怎么工作的?

本文转自 公众号 ByteByteGo&#xff0c;如有侵权&#xff0c;请联系&#xff0c;立即删除 单点登录是怎么工作的&#xff1f; 今天来聊聊单点登录&#xff08;Single Sign On&#xff09;。 01 单点登录的主要参与者 用户 - 申请访问应用程序的个人身份供应商&#xff08;I…

浪潮服务器使用ARCCONF查看RAID配置信息

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、获取ARCCONF二、使用步骤1.Windows Server 20221.查看RAID控制器2.查询控制器属性3.查询虚拟磁盘属性4.查询物理硬盘属性 2.Ubuntu-22.043.CentOS7 三、配置…

Java学习笔记10——静态内部类使用及意义

当不需要内部类对象与外部类对象有任何联系时&#xff0c;可以使用static关键字来声明这个内部类&#xff0c;这种静态内部类也称为嵌套类&#xff08;nested class&#xff09;。当我们创建一个静态内部类的对象时&#xff0c;并不需要先创建外部类的对象&#xff0c;与类中的…

matlab读取hdf5格式的全球火灾排放数据库Global Fire Emissions Database(GFED)数据

1.引言 火灾是大气中痕量气体和气溶胶的重要来源&#xff0c;并且是全球尺度上最重要的干扰因素。此外&#xff0c;森林砍伐和热带泥炭地火灾以及火灾频率增加的地区&#xff0c;都会增加大气中二氧化碳的积累。烧毁面积提供了生物质燃烧事件期间受火灾影响土地的估算&#xff…

300分钟吃透分布式缓存-20讲:Redis如何处理文件事件和时间事件?

Redis 事件驱动模型 事件驱动模型 Redis 是一个事件驱动程序&#xff0c;但和 Memcached 不同的是&#xff0c;Redis 并没有采用 libevent 或 libev 这些开源库&#xff0c;而是直接开发了一个新的事件循环组件。Redis 作者给出的理由是&#xff0c;尽量减少外部依赖&#xff…

Flink:Temporal Table 的两种实现方式 Temporal Table DDL 和 Temporal Table Function

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

上海计算机学会 2023年11月月赛 乙组T4 平分子集(三)(状态压缩 折半枚举)

第四题&#xff1a;T4平分子集&#xff08;三&#xff09; 标签&#xff1a;状态压缩、折半枚举题意&#xff1a;一个集合被称之为可平分的&#xff0c;如果它可以被分为两部分&#xff0c;且两部分的元素之和相等。空集也算可平分的。给定一个集合 a 1 , a 2 , a 3 , … , a …