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

发布于 2017-07-14 11:11:37 字数 1620 浏览 2278 评论 0

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

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。