您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:12-25来源:作者:点击数:

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/
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐