HTML5 sprite 样式创建工具Stitches介绍(本文由www.169it.com搜集整理)
Stitches is An HTML5 sprite sheet generator。Stitches 是一个 HTML5 sprite 样式创建工具，可以将多个图片合并成一个，并给出 sprite 样式。Stitches一款HTML5版网页生成器。你只需简单拖放图片文件至页面空白处并点击 “Generate” 即可创建出一款简单的样式列表。Stitches使用一组HTML5 API，它是目前唯一一款兼容Chrome和Firefox最新版本的应用，暂不支持IE9。对于老版本的浏览器，需要安装jQuery 1.7.1+、Modernizr、Dropfile、Flashcanvas。该产品基于MIT许可证发行。
HTML5 sprite 样式创建工具Stitches主页: Stitches主页
Stitches其它介绍
Implementation
After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done:
<link rel="stylesheet" href="/article/css/stitches-1.3.5.min.css">
<script data-main="js/stitches.js" src="/article/js/stitches-1.3.5.min.js"></script>
The sprite sheet generator is automatically created in elements that have the stitches class:
<div class="stitches"></div>
If you choose, any images that are a part of the initial markup will be loaded onto the canvas:
<div class="stitches">
<img src="/article/img/test/github.png" data-name="github"/>
<img src="/article/img/test/gmail.png" data-name="gmail"/>
<img src="/article/img/test/linkedin.png" data-name="linkedin"/>
<img src="/article/img/test/stackoverflow.png" data-name="stackoverflow"/>
<img src="/article/img/test/tumblr.png" data-name="tumblr"/>
<img src="/article/img/test/twitter.png" data-name="twitter"/>
</div>
依赖(Dependencies)
jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New
<link rel="stylesheet" href="/article/libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/article/libs/bootstrap/css/bootstrap-responsive.min.css">
<script src="/article/libs/jquery/jquery-1.7.1.min.js"></script>
<script src="/article/libs/modernizr/modernizr-2.0.6.min.js"></script>
<script src="/article/libs/bootstrap/js/bootstrap.min.js"></script>
