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 使用最简单的计数方式,但它是一个相当快速和容易的方法来控制每一个字母。