×

推荐一款H5合成Css Sprite雪碧图工具

作者:Terry2017.01.23来源:Web前端之家浏览:23951评论:0
关键词:html5雪碧图

html5实现一个合成雪碧图的工具,方便小项目的快速开发,减少一些诸如开photoshop、fireworks等工具来合图的机械劳动,最近终于抽出时间将构思实现。

Go!Png介绍:

目前实现的功能如下:

  1. 支持图片文件拖拽

  2. 支持生成png图片与css文件

  3. 支持两种自动排列的模式

  4. 放大镜功能

  5. 磁力吸附对齐功能

  6. 工作状态导出功能,可以方便导出文件,在下一次操作通过拖放改文件来恢复工作状态(包括图片数据跟参数设置)

  7. 支持Mac(Chrome) :)

使用说明

1.拖拽图片小文件到操作区域,如下图:

2.输入类属性设置与目标图片、css文件生成,如下图

3.生成的css文件是可以通过改变css模版来定制的

使用的模版函数是John Resig的Micro-Templating,
可以用的变量有:
  • x 图片的x坐标

  • y 图片的y坐标

  • w 图片的宽度

  • h 图片的高度

  • name 图片文件的名称(不带后缀)

  • absolute_path 绝对路径(自定义)

  • relative_path 相对路径(自定义)

x、y、w、h的解释如下图:
css模版的设置操作如下图:

4.生成目标图片、css后可以直接下载

点击download按钮即可完成下载:

5.工作状态导出

这个功能是可以将你目前的工作状态,包括图片的数据(图片、图片位置排列),参数设置(包括主页的参数设置与css模版设置),全部导出成一个文件,下次利用此文件便可复原工作状态。
导出如下图:
导入如下图:
即可复原:


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/xuebiCss3.html

网友评论文明上网理性发言已有0人参与

发表评论: