Lettering.js 基于 jQuery 字符串切割插件 - 资源分享

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

发布于 2017-07-14 字数 1891 浏览 2159 评论 0

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

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

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3