雪碧图集成方法、系统及装置制造方法及图纸

技术编号:24251722 阅读:74 留言:0更新日期:2020-05-22 23:40
本发明专利技术实施例提供了一种雪碧图集成方法、系统及装置,该方法包括获取要集成雪碧图的多个图片;给多个图片创建图片名和样式名称规则,其中,样式名称规则规定一种图片状态使用一种样式名;将多个图片集成雪碧图,并基于图片名和样式名称规则建立对应于雪碧图的级联样式表。本发明专利技术缓解了传统雪碧图集成方法中样式引用繁琐的技术问题。

Sprite diagram integration method, system and device

【技术实现步骤摘要】
雪碧图集成方法、系统及装置
本专利技术涉及计算机网页的
,特别涉及一种雪碧图集成方法、系统及装置。
技术介绍
在网页设计和前端开发中,常常采用级联样式表(CascadingStyleSheet,简称CSS)进行网页风格设计,并且为了代码组织的便利,常常使用多个CSS样式文件。随着网站业务的复杂化,我们需要对网站性能进行必要的优化,其中,为了减少http请求以达到页面快速显示的目的,我们需要利用CSSSprite(即CSS精灵)将多个CSS样式文件中的小图标集成一张大图(俗称雪碧图)。目前,业界普遍采用Photoshop手动合成、Css图片合成工具或构建工具来实现雪碧图的集成。这三种方法中,一张图片对应一个样式名,样式名可能是图片名或者程序生成的某种序号,如,image-1、image-2等。我们知道网站上面的网页与用户有交互行为产生,这种行为产生后就可能表现为网页上图片的样式变更。一个典型的例子:用户点击网页的一个图片,未点击的时候可能运用的是样式名为a的样式,鼠标移动到该图片的时候可能变成样式名为b的样式,鼠标点击的时候变为样式本文档来自技高网...

【技术保护点】
1.一种雪碧图集成方法,其特征在于,包括:/n获取要集成雪碧图的多个图片;/n给多个所述图片创建图片名和样式名称规则,其中,所述样式名称规则规定一种图片状态使用一种样式名;/n将多个所述图片集成雪碧图,并基于所述图片名和所述样式名称规则建立对应于所述雪碧图的级联样式表。/n

【技术特征摘要】
1.一种雪碧图集成方法,其特征在于,包括:
获取要集成雪碧图的多个图片;
给多个所述图片创建图片名和样式名称规则,其中,所述样式名称规则规定一种图片状态使用一种样式名;
将多个所述图片集成雪碧图,并基于所述图片名和所述样式名称规则建立对应于所述雪碧图的级联样式表。


2.根据权利要求1所述的方法,其特征在于,给多个所述图片创建样式名称规则,包括:
获取多个所述图片的状态类型;
给所述状态类型创建后缀名,其中,所述后缀名和所述状态类型一一对应,所述后缀名用于加在所述图片名之后构成目标样式的样式名,所述目标样式为所述图片名所标识图片在所述后缀名所对应状态类型下使用的样式;
将所述状态类型和所述后缀名之间的关联关系确定为所述样式名称规则。


3.根据权利要求1所述的方法,其特征在于,获取要集成雪碧图的多个图片,包括:
获取选择指令,其中,所述选择指令为从在线平台和本地平台中选择目标平台的指令,所述目标平台为集成雪碧图的当前使用平台;
基于所述选择指令,使用所述目标平台加载多个所述图片。


4.根据权利要求3所述的方法,其特征在于,在所述目标平台为所述在线平台的情况下,使用所述目标平台加载多个所述图片,包括:
接收用户上传的多个所述图片;
将接收到的多个所述图片展示在所述在线平台的浏览器界面中。


5.根据权利要求4所述的方法,其特征在于,建立对应于所述雪碧图的级联样式表之后,所述方法还包括:
接收第一更新指令,其中,所述第一更新令是用户在对所述浏览器界面中的所述图片更新后,向所述在线平台发出的;
基于所述第一更新指令,通过所述在线平台将所述浏览器界面中更新后的多个所述图片集成更新后的雪碧图,并根据所述样式名称规则更新所述级联样式表。


6.根据权利要求4所述的方法,其特征在于,建立对应于所述雪碧图的级联样式表之后,所述方法还包括:
接收修改指令,其中,所述修改指令为对目标信息进行修改的修改数据,所述目标信息包括以下至少一种信息:所述图片名和所述样式名称规则;
基于所述修改指令,通过所述在线平台对所述目标信息进行修改。


7.根据权利要求3所述的方法,其特征在于,在所述目标平台为所述本地平台的情况下,使用所述目标平台加载多个所述图片,包括:
通过预设文件夹接收用户存放的多个所述图片,其中,所述预设文件夹为所述本地平台集成雪碧图所用图片而调用的文件夹。


8.根据权利要求7所述的方法,其特征在于,建立对应于所述雪碧图的级联样式表之后,所述方法还包括:
接收第二更新指令,其中,所述第二更新指令是用户在对所述预设文件夹中的所述图片更新后,向所述本地平台发出的;
基于所述第二更新指令,通过所述本地平台将所述预设文件夹中更新后的多个所述图片集成更新后的雪碧图,并根据所述样式名称规则更新所述级联样式表。


9.根据权利要求3所述的方法,其特征在于,所述在线平台和所述本地平台通过通信线路连接,其中,
所述通信线路用于供所述在线平台和所述本地平台之间相互传递所述图片名和所述样式名称规则,以便所述在线平台和所述本地平台之间使用相同的所述图片名和所述样式名称规则。


10.根据权利要求1所述的方法,其特征在于,建立对应于所述雪碧图的级联样式表之后,所述方法还包括:
提取所述图片的样式名;
根据所述样式名确定样式标志,其中,所述样式标志至少包括所述样式名;
建立所述样式标志和图片标志之间的对应关系,其中,所述图片标志包括所述图片的图片名,和/或,图片示例;
通过所述对应关系构建示例列表。


11.根据权利要求1所述的方法,其特征在于,建立对应于所述雪碧图的级联样式表之后,所述方法还包括:
接收查验人员发送的检查指令;
根据所述检查指令,向所述查验人员推送所述雪碧图和所述级联样式表,和/或,向所述查验人员推送使用所述雪碧图和所述级联样式表的网页。


12.一种雪碧图集成系统,其特征在于,包括:
获取模块,用于获取要集成雪碧图的多个图片;
创建模块,用于给多个所述图片创建图片名和样式名称规则,其中,所述样式名称规则规定一种图片状态使用一种样式名;
集成建立模块,用于将多...

【专利技术属性】
技术研发人员:谭洪招
申请(专利权)人:北京京东尚科信息技术有限公司北京京东世纪贸易有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1