当前位置:  Web服务器/前端>html5

HTML5 sprite 样式创建工具Stitches介绍

 
    发布时间:2014-11-18  


    本文导语:  HTML5 sprite 样式创建工具Stitches介绍(本文由www.搜集整理) Stitches is An HTML5 sprite sheet generator。Stitches 是一个 HTML5 sprite 样式创建工具,可以将多个图片合并成一个,并给出 sprite 样式。Stitches一款HTML5版...

    HTML5 sprite 样式创建工具Stitches介绍(本文由www.169it.com搜集整理)

    Stitches is An HTML5 sprite sheet generator。Stitches 是一个 HTML5 sprite 样式创建工具,可以将多个图片合并成一个,并给出 sprite 样式。Stitches一款HTML5版网页生成器。你只需简单拖放图片文件至页面空白处并点击 “Generate” 即可创建出一款简单的样式列表。Stitches使用一组HTML5 API,它是目前唯一一款兼容ChromeFirefox最新版本应用,暂不支持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>


    您可能感兴趣的文章:

  • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
    转载请注明:文章转载自:[169IT-IT技术资讯]
    本文标题:HTML5 sprite 样式创建工具Stitches介绍
相关文章推荐:


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3