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

最新推荐文章于 2025-03-28 18:19:16 发布
最新推荐文章于 2025-03-28 18:19:16 发布
阅读量702 收藏
点赞数 4
分类专栏： 简单的JS逻辑题 文章标签： css 前端 html css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NY_21/article/details/128756043
版权
本文详细介绍了如何制作一竖列和矩阵式的精灵图。对于一竖列精灵图，通过计算y轴值并利用for循环实现图标定位。矩阵式精灵图则需要考虑x轴和y轴的变化，通过判断行和列的位置关系进行图标定位。文章提供了CSS、HTML和JavaScript代码示例，适用于前端开发者学习。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

1、思路

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

2、实操

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

  1. 将css和html先写好be like

css




                

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        


    


                



	

		

			

				
					
【KingSCADA】什么是精灵图以及如何创建精灵图

				
			

			

				

					做有价值的事，积累有价值的笔记！
				

				

					04-24
					
					3542
					
				

			

		

		

			
				
精灵图是一种在外观上类似组合图，但内部嵌入了比较丰富的动画链接与逻辑控制，工程开发人员只要将其从精灵图库中调出来放置在开发画面上，然后再做少量的修改，就能完成较复杂的控制功能。精灵图可以由图元对象、自定义变量、自定义属性及动画处理4部分组成。组成精灵图的图元对象可以是直线、曲线、矩形，圆形等基本图元或者它们的组合图，也可以是精灵图对象，即精灵图的开发式可以实现嵌套的。

			
		

	



                

            
              



	

		

			

				
					
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM

				
			

			

				

					weixin_42413901的博客
				

				

					04-25
					
					817
					
				

			

		

		

			
				
一、Web APIs 简介
此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性；  能够说出什么是 API；  能够说出什么是 Web API.

1. Web APIs 和 JS 基础关联性
1.1 JS 的组成

1.2 JS 基础阶段以及 Web APIs 阶段

2. API 和 Web API
2.1 API
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软

			
		

	



              


  
              

                


	

		

			

				
					
精灵图的制作和使用

				
			

			

				

					qq_52622178的博客
				

				

					04-01
					
					2795
					
				

			

		

		

			
				
精灵图的制作和使用
认识css精灵：
css精灵（也称CSS Sprites）是一种处理网页背景图像的方式。通常情况下，由很多小的背景图像合成的大图称为精灵图。
【精灵图的制作】
利用ps制作精灵图步骤

在ps上新建一个画布



点击移动工具，将图片往新建的画布里面拖

全部完成之后，将这个小图层全部合并，最后以png格式导出，即精灵图制作完毕

【精灵图的使用】
实例图片（图片转载）
—
利用ps找到具体位置
代码如下

 <style>
        .box1{
          

			
		

	





	

		

			

				
					
css Sprites精灵图制作

				
			

			

				

					09-07
				

			

		

		

			
				
css Sprites精灵图制作。加快网页加载速度 
浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染
后期维护简单 
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用
使用教程链接http://blog.youkuaiyun.com/Makenzie/article/details/77881957

			
		

	



		

			
		



	

		

			

				
					
精灵图制作及使用

				
			

			

				

					Ice__wine的博客
				

				

					07-12
					
					759
					
				

			

		

		

			
				
为了减小游戏体积，加快加载游戏，使用精灵图来达到效果。

			
		

	





	

		

			

				
					
精灵图的制作

				
			

			

				

					2301_80409048的博客
				

				

					12-16
					
					514
					
				

			

		

		

			
				
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。可以用Adobe Fireworks CS6这个小程序来帮助我们测量目标图片的位置。移动背景图片位置， 此时可以使用 background-position。精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。移动的距离就是这个目标图片的 x 和 y 坐标。使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

			
		

	





	

		

			

				
					
制作精灵图

				
			

			

				

					J_aSON_的博客
				

				

					04-03
					
					351
					
				

			

		

		

			
				
制作精灵图
材料：

n 张图片

工具：
​              1.ps cc 2015
步骤：
1.首先我先用ctrl + n 新建了一个文件，然后设置了透明图层的大小，因为图片缩小了会失真，所以我设置的很大（我也不太懂）
2.通过计算每张图片要占的像素大小设置，参考线（纵向/横向），参考线在视图中。
3.然后就点击文件的  置入嵌入式智能对象，然后就调整一下大小合适之后，右键置入就可...

			
		

	





	

		

			

				
					
DOM操作元素之循环精灵图

				
			

			

				

					qq_40319421的博客
				

				

					06-03
					
					377
					
				

			

		

		

			
				
利用for循环设置一组元素的精灵图背景。

精灵图获取路径：https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png

分析：

首先精灵图图片排列有规律(该图片在同一X轴上，Y轴上相邻图片之间相距44px)；
	核心思路：利用for循环 修改精灵图片的背景位置background-positin;
	数学思路：让循环里的 i 索引号 * 44 就是每个图片的 y 坐标。
具体代码：


<!DOCTYPE html&gt..

			
		

	





	

		

			

				
					
JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts（2）

				
			

			

				

					weixin_43200099的博客
				

				

					03-22
					
					1655
					
				

			

		

		

			
				
Web APIs
Web APIs和JS基础关联性

API和Web API
API:应用程序编程接口
Web API：浏览器提供的一套操作浏览器功能和页面元素的API（BOM DOM）

DOM
DOM即文档对象模型，处理HTML或XML的标准编程接口。通过DOM接口可以改变样式内容结构。如可以做轮播图、倒计时…
DOM树

DOM把以上内容都看作对象。
获取元素
ID、标签名、H5新方法、特殊
getElementByld()返回一个匹配的ID元素
getElementsByTagName(） 返回标签

			
		

	





	

		

			

				
					
puck-man:要制作一个冰球人游戏，然后添加一些幻影逻辑，所以它不是那么随机

				
			

			

				

					05-24
				

			

		

		

			
				
6. **敌人AI**：游戏中的敌人应当具备一定的智能，比如追踪冰球人或者有规律地移动。我们可以实现简单的AI算法，如寻路算法（如A*搜索）来控制敌人的行为。  7. **用户交互**：JavaScript将用于处理用户的键盘输入或...

			
		

	





	

		

			

				
					
精灵图（CSS Sprite）制作教程

					
最新发布

				
			

			

				

					杜鲁阳的博客
				

				

					03-28
					
					1108
					
				

			

		

		

			
				
精灵图（CSS Sprite）是一种将多个小图片合并到一张大图片中的技术，通过 CSS 控制背景位置来显示不同部分的图片。主要用于网站图标、按钮、导航栏背景等元素的优化。1. 课程总结了解了精灵图的概念和优缺点学习了两种制作精灵图的方法（手动制作、在线工具）掌握了 CSS background-position 的使用方法学会了 hover 效果和响应式设计2. 课后作业选择一个网页项目，将页面中的多个小图片优化为精灵图。

			
		

	





	

		

			

				
					
精灵图（css sprites）

				
			

			

				

					鹿蹊zz的博客
				

				

					05-10
					
					3387
					
				

			

		

		

			
				
目录

一、什么是精灵图？

二、精灵图的优点

三、精灵图的缺点

四、精灵图的基本用法

五、 background-position

六、渐变

1、线性渐变

2、径向渐变



一、什么是精灵图？

所谓精灵图就是图片拼合技术，把很多的小图片合并到一张较大的图片里，通过css中的background-position属性，显示精灵图中某一个小图标。


二、精灵图的优点

   在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，.....

			
		

	





	

		

			

				
					
精灵图片的制作

				
			

			

				

					ChenyiMX的博客
				

				

					07-02
					
					1408
					
				

			

		

		

			
				
https://blog.youkuaiyun.com/qq_37674858/article/details/80361860
这篇比较效详细，其他的没提一些坑



			
		

	





	

		

			

				
					
如何制作精灵图？——别再花积分去买资源了

				
			

			

				

					Hemx的博客
				

				

					09-18
					
					632
					
				

			

		

		

			
				
css Sprites精灵图制作。
加快网页加载速度
浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染，后期维护简单
推荐一些制作精灵图的方式
CSS Sprites Generator——生成精灵图 工具网站
直接有现成的开搞。

精灵图自动检测工具


...

			
		

	





	

		

			

				
					
精灵图（制作）

				
			

			

				

					xx02429的博客
				

				

					05-23
					
					2623
					
				

			

		

		

			
				
本质 处理网页背景图像的方式(背景图像)
减少服务器请求次数
精灵技术使用
制作精灵图方式
新建图层 （透明）

右键选中（复制图层 /复制组到目标文件）


...

			
		

	





	

		

			

				
					
关于精灵图

				
			

			

				

					Twilight's Blog
				

				

					02-07
					
					9218
					
				

			

		

		

			
				
之前就发现一些网站吧所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。他的优点是可以减少浏览器请求的次数，把所有图片拼接在一张图中就只需要请求一次，当浏览器需要用到图片时再从大图片中解析。这样可以加快访问的次数。先来看看效果图：拼接的图片： 
他的原理是，先规定好每个小图标的大小，创建一个和小图标大小相同的容器，再通过移动背景图片的方法将大图中

			
		

	





	

		

			

				
					
【GIS】maplibre之制图（一）--使用spritezero镜像制作精灵图

				
			

			

				

					SieSteven
				

				

					07-17
					
					1435
					
				

			

		

		

			
				
使用spritezero镜像制作精灵图

			
		

	





	

		

			

				
					
前端必备技能之如何制作精灵图

				
			

			

				

					weixin_42565137的博客
				

				

					07-28
					
					2666
					
				

			

		

		

			
				
为什么要用精灵图？
比如京东首页的这些icon，如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS 、图片等)数量是有限的。
我们可以将这些icon放到一张图片，通过截取这张图片的不同的区域，拿到不同的icon

制作一个背景透明的Icon

截图你喜欢的logo，最好是正方形。

打开ps，使用快速选择工具

选择白色区域ctrl+x删除...

			
		

	





	

		

			

				
					
compass 制作精灵图

				
			

			

				

					maoguiyou的专栏
				

				

					04-24
					
					1927
					
				

			

		

		

			
				
用compass快速制作精灵图
1.现在images文件夹新建一个文件夹装各种小图标,命名为Icon；
2.然后再sass文件加上这几句命令：
@import "compass/utilities/sprites"   ;  //导入compass精灵模块；
$Icon-spacing:5px;   //设置生成的精灵图里面每个小图标的间距是5px；如果只是想设置某个图标的间距可以这样做：

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值