Lettering.js 基于 jQuery 字符串切割插件

Question

Lettering.js 是一个使文字适应更好的页面排版简单而有效的jQuery插件。他所做的就是把一段文字有序的分成多个SPAN来显示，这样你就可以定义每个字母的样式了。

Web技术正在高速的发展，但是CSS却没有能单独控制某个字符的能力，所以我们创建了一个jQuery插件，把字符串切割为每个字符，方便你单独设置每个字符的样式。

使用方法

假设我们的页面上有一个这样的HTML代码：

<h1 class="fancy_title">Some Title</h1>

然后我们引入 jQuery 和 Lettering.js 文件，然后在文档加载完毕以后，调用 .lettering() 方法：

<script src="jquery.min.js"></script>
<script src="lettering.js"></script>
<script>
$(document).ready(function() {
    $(".fancy_title").lettering();
});
</script>

最后插件会将上面的HTML代码生成下面的样子：

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

是不是很神奇，现在你可以通过CSS样式，单独控制每一个字符，Lettering.js 使用最简单的计数方式，但它是一个相当快速和容易的方法来控制每一个字母。

相关链接

• Github地址：https://github.com/davatron5000/Lettering.js
• 项目地址：http://letteringjs.com/