DOM制作精灵图-有规律的精灵图

2024-06-13 15:50:10

在学习css的时候学到过精灵图的使用，就是在一个聚集了很多图标的一张图上面找到其他的图片，然后进行对每一个图片的位置进行更改，更改背景图片的位置。但是在学习了DOM之后，我们可以更加简单的对精灵图进行操作，节约更多的代码。（仅限于精灵图布局有规律，大小不一那种不太行）

一、一竖列式精灵图（乱起的名）

当精灵图是一竖列的，那就很好解决啦。因为我们精灵图使用的时候就是改变他的 backgroundPosition,而backgroundPosition的参数分别是x轴与y轴的位置，而一竖列的精灵图我们就不用考虑x轴的问题，直接看y轴（以下方法只适用于y轴参数有规律，如果精灵图内的图片高度不统一那就需要单独调用啦）

一竖列式精灵图就像下图这样：

1、思路

因为图片是竖列所以只需要计算y轴的值，通过ps等测算出图标的大小规律，然后再通过for循环对每一个图标进行坐标更改

2、实操

通过测量得知每一个图标大小为24px，同时上下间隔20px，也就是说每一张图片的高度可以算为44px。有了这个我们就可以循环啦

将css和html先写好be like

css

<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: rgb(211, 255, 145);margin: 15px;background: url(images/sprite.png) no-repeat;}</style>

html

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

接下来就是激动人心的js部分啦！因为for循环是有一个循环内容的（遍历内容），那么我们要遍历的是ul里面的li。所以勒先获取所有的li，document.querySelectorAll获取的li输出的是一个数组，这样我们就拥有了一个可以遍历的对象。

可以得知第一个li的图标的定位是0，0，第二个：0，-44px，第三个：0，-88px，以此类推，那么就可以表示为：第i个li的图标定位是0，-i*44px；

代码如下：

<script>// 1. 获取元素 所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';//lis[i].style.backgroundPosition = ·0 -${index}px·;用模版字符串}</script>

3、运行结果

二、矩阵式精灵图（乱起的名+1）

矩阵式顾名思义像矩阵一样的精灵图，就是横竖都有图标，这个时候就要考虑x轴和y轴两个轴的变化。

矩阵式精灵图大概像这样（网上随便找的，大概齐意思意思）

我们要的结果是如下图显示（请忽略水印以及多出来的翅膀和jio）

1、思路

其实思路是和一竖列一样的，只是要多思考每一行该怎么表示，因为我找的素材是3x3的，所以他的x轴变化和y轴也不复杂，因为我们获取的li是一个数组，所以我们可以循环啦！

但是呢循环肯定不能跟一列式一样，如下图列出来了如果不计算图片大小的话他们的位置关系，可以先判断出li在哪一行，再判断li是哪一列就可以了

2、实操

素材的宽高为1024x1024，所以平均一下每一个精灵的宽高就是341x341（差不多，有一个精灵

DOM制作精灵图-有规律的精灵图相关推荐
1. CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
  本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
2. 提高页面的加载速度的方法——精灵图和字体图标
  1. 精灵图 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 为 ...
3. CSS精灵图和字体图标及下载
  精灵图和字体图标精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
4. css进阶：精灵图的使用、实现用精灵图拼出名字
  目录 1.精灵图的用途 2. 精灵图(sprites)的使用 2.1 原理 2.2 总结 3. 案例:用精灵图拼出名字 3.1 效果图 3.2 代码 1.精灵图的用途为了有效地减少服务器接收和请求的 ...
5. css补充（1）：css实现小三角，精灵图，字体图标
  文章目录一.css实现小三角 1.1 三角形实现二.精灵图的使用三.字体图标一.css实现小三角 1.1 三角形实现 html: <div class="sanjiao&quo ...
6. html中精灵图的使用方法,关于CSS Sprites、CSS精灵的详细解析
  原标题:关于CSS Sprites.CSS精灵的详细解析 CSS Sprites简介 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思.在国内习惯成他 ...
7. PS制作CSS精灵图
  精灵图简介 1.精灵图(雪碧图) (1)问题:精灵图就是将很多的小图标合并到一张较大的图片中,那精灵是啥意思呢?(为此笑了一下午的我) . (2)精灵图也称雪碧图,由于大型网页首次加载需要时间,如果再 ...
8. html精灵图资源,知识分享：HTML5+CSS3基础之CSS Sprites（CSS精灵）
  原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...
9. 前端必备技能之如何制作精灵图
  为什么要用精灵图? 比如京东首页的这些icon,如果每个icon都去请求一个资源.是非常浪费资源的.因为我们浏览器在同一个域名下并发加载的资源(CSS.JS .图片等)数量是有限的. 我们可以将这些i ...
最新文章
热门文章