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

最新推荐文章于 2024-05-03 15:54:26 发布
VIP文章 最新推荐文章于 2024-05-03 15:54:26 发布
阅读量551 收藏
点赞数 4
分类专栏： 简单的JS逻辑题 文章标签： css 前端 html css3 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ny_21/article/details/128756043
版权
在学习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元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  二大一
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
css Sprites精灵图制作

				
			

			

				

					09-07
				

			

		

		

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

			
		

	



                

              
                



	

		

			

				
					
PS制作CSS精灵图

				
			

			

				

					qq_43093230的博客
				

				

					08-06
					
					5257
					
				

			

		

		

			
				
精灵图简介
1.精灵图（雪碧图）
（1）问题：精灵图就是将很多的小图标合并到一张较大的图片中，那精灵是啥意思呢?(为此笑了一下午的我) 。
（2）精灵图也称雪碧图，由于大型网页首次加载需要时间，如果再加之加载小图标的时间，则会严重影响到用户体验。所以，考虑到在同一时间内，服务器拥堵的情况，使用精灵图来解决这一问题。那么怎么制作精灵图呢
2.使用ps制作精灵图的详细步骤
示例：将如下图图片中的四个图...

			
		

	



                


  
              

                


	

		

			

				
					
dom4j-2.1.3.jar

				
			

			

				

					04-29
				

			

		

		

			
				
官方最新版本，支持Java 8+。
dom4j是一个Java的XML API，是jdom的升级品，用来读写XML文件的。dom4j是一个十分优秀的JavaXML API，具有性能优异、功能强大和极其易使用的特点，它的性能超过sun公司官方的dom技术，同时它也是一个开放源代码的软件。
dom4j-2.1.3
XML Document Object Model based on Java Collections Framework
Java 8+
Generics support

			
		

	





	

		

			

				
					
dom-to-to-retina视网膜：dom-to-to-retina，但生成高分辨率图像

				
			

			

				

					03-04
				

			

		

		

			
				
dom到图像视网膜
 这结合了和 。
用法
import { toPng , toJpeg , toBlob } from "dom-to-image-retina"
const dataUrl = await toPng ( el , options )
const dataUrl = await toJpeg ( el , options )
const blob = await toBlob ( el , options )
执照
麻省理工学院。

			
		

	



		

			
		



	

		

			

				
					
dom-to-image.js

				
			

			

				

					07-27
				

			

		

		

			
				
一开始使用的是html2canvas.js。功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错

			
		

	





	

		

			

				
					
制作精灵图

				
			

			

				

					J_aSON_的博客
				

				

					04-03
					
					284
					
				

			

		

		

			
				
制作精灵图
材料：

n 张图片

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

			
		

	





	

		

			

				
					
精灵图的制作和使用

				
			

			

				

					qq_52622178的博客
				

				

					04-01
					
					2456
					
				

			

		

		

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

在ps上新建一个画布



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

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

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

 <style>
        .box1{
          

			
		

	





	

		

			

				
					
精灵图片的制作

				
			

			

				

					ChenyiMX的博客
				

				

					07-02
					
					1240
					
				

			

		

		

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



			
		

	





	

		

			

				
					
精灵图（css sprites）

				
			

			

				

					鹿蹊zz的博客
				

				

					05-10
					
					2581
					
				

			

		

		

			
				
目录

一、什么是精灵图？

二、精灵图的优点

三、精灵图的缺点

四、精灵图的基本用法

五、 background-position

六、渐变

1、线性渐变

2、径向渐变



一、什么是精灵图？

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


二、精灵图的优点

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

			
		

	





	

		

			

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

				
			

			

				

					北纬38度的雷先森
				

				

					04-24
					
					2199
					
				

			

		

		

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

			
		

	





	

		

			

				
					
JavaEE源代码 dom4j-1.6.1

				
			

			

				

					07-09
				

			

		

		

			
				
JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1.6.1JavaEE源代码 dom4j-1

			
		

	





	

		

			

				
					
JS DOM实现鼠标滑动图片效果

				
			

			

				

					11-23
				

			

		

		

			
				
都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，...

			
		

	





	

		

			

				
					
CSS Sprites精灵图（雪碧图）的使用以及利用工具制作

				
			

			

				

					qq_43812504的博客
				

				

					12-04
					
					1333
					
				

			

		

		

			
				
CSS Sprites的原理（图片整合技术）----精灵图（雪碧图）


原理：
将导航背景图片、按钮背景图片等有规则的合并成一张背景图，将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。


图片整合的优势：
1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

2）通过整合图片来减小图片的体积。


利用工具制作精灵图：

使用ps创建图层，背景透明，将背景图复制到该图层中进行排列：


将背景图全部选中拉进ps，依次双击出现每个图片，拖动进行

			
		

	





	

		

			

				
					
精灵图的制作

				
			

			

				

					2301_80409048的博客
				

				

					12-16
					
					390
					
				

			

		

		

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

			
		

	





	

		

			

				
					
CSS高级技巧：精灵图、字体图标、三角形制作、布局技巧

				
			

			

				

					weixin_42044763的博客
				

				

					05-18
					
					2307
					
				

			

		

		

			
				
一、精灵图
精灵图是啥捏，其实说白了就是一个合并的图层，把一个网页里的所有小图标合并成一个大的图，然后某个位置要用某个图的时候，先把这个大的图调用过来，通过挪动位置来定位到里面的小图，比如王者荣耀官网这个图：

精灵技术的目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。


使用代码试一试：
先用PS切图工具量一下宽高和xy轴的偏移距离，然后再去定义盒子
.box1 {
            width: 63px;
            height: 59px;
         

			
		

	





	

		

			

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

				
			

			

				

					Hemx的博客
				

				

					09-18
					
					510
					
				

			

		

		

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

精灵图自动检测工具


...

			
		

	





	

		

			

				
					
精灵图（制作）

				
			

			

				

					xx02429的博客
				

				

					05-23
					
					2550
					
				

			

		

		

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

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


...

			
		

	





	

		

			

				
					
关于精灵图

				
			

			

				

					Twilight's Blog
				

				

					02-07
					
					9153
					
				

			

		

		

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

			
		

	





	

		

			

				
					
css响应式布局左、右上、右中布局

					
最新发布

				
			

			

				

					fengchengwu2012的博客
				

				

					05-03
					
					280
					
				

			

		

		

			
				
【代码】css响应式布局左、右上、右中布局。

			
		

	





	

		

			

				
					
react-router-dom react-router-config 安装失败

				
			

			

				

					01-13
				

			

		

		

			
				
您可以尝试以下步骤来解决react-router-dom和react-router-config安装失败的问题：  1. 确保您已经正确安装了Node.js和npm。您可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ```  2. 确保您...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值