MyException - 我的异常网
当前位置:我的异常网» jQuery » 使用JQuery.lettering.js实现多行文本式样自定义

使用JQuery.lettering.js实现多行文本式样自定义

www.MyException.Cn  网友分享于:2015-04-28  浏览:0次
使用JQuery.lettering.js实现多行文本样式自定义

前几天一位在广告公司的朋友发来求助,说:“有一个项目要求实现对字符串进行动态拆分,然后对拆分出的字符分别使用不同的样式效果...”,听到这个需求,我内心有点不屑,这有何能,最多五分钟搞定啊~~ 于是我在直接在浏览器控制台敲了一段Demo代码发给这位朋友,然后沾沾自喜中.....五秒钟后,回复我说:“不是的,*&*^&*~~!@......”,我意识到模糊的需求真TMD害人害己啊,不搞清需求盲目动手真是自找苦吃啊~~~

 

经过一番更详尽的沟通后,总结他的需求是这样的:一段随机的英文文本放在一个固定宽度的容器中,且文本如果出现多行情况时,每行文本的样式(如:字体大小,颜色等)可以通过CSS控制与其它行进行样式区分;当英文文本更改后,同样可以实现上述需求。

 

最终的效果可能如下图(画的太丑~): 

 

这样子岂不是要将字符串中的每一个单词都截出来,然后逐个再放回到容器中,当某一个单词在当前行中无容身之处时,强制将其置于下一行,依此类推,直到最后。 

突然回想起来前一段时间看到过一个基于JQuery的插件,叫做Lettering.js (官网:http://letteringjs.com/),可以实现对英文字符的智能拆分,可以通过参数实现拆分为行(line)、单词(word)、字符(char)的操作,使用很方便简洁,那我想,这个拆分截取的工作就可以交给它来完成,我可以将重点放在换行的判断操作上。

 

Lettering.js官方的一个example网站实现方式:

HTML源代码及Lettering.js的使用:

应用Lettering.js的HTML源代码

 

使用Lettering.js后HTML结构:

应用Lettering.js后HTML结构

 

通过分析可以看到:

1、在JS代码中执行$(".glass p").lettering("lines")后,将原来每一个<br>标签前后的文本都wrap在一个独立的<span class="line*"></span>中;

2、对行进行单词拆分操作,如:$('.line3').lettering('words');

3、对行进行字符拆分操作,如:$('.line2').lettering();

3、对行进行单词+字符拆分操作,如:$('.line1').lettering('words').children('span').lettering();

 

而我们要实现的目标与上面这个example中的区别是:

1、我们不会事先将文本进行手动换行(即:不会手动添加<br>,因为不知道应该在哪里加<br>~~~);

2、我们无须将单词进一步拆分为字符;

3、我们一共会有多少行文本? 这是一个未知数,直到最后一刻才可知晓~~~。

 

我们的实施:

 html容器:

<div id="test" class="test-text">Here is the multiline English text of demonstration, the text here is dynamic and the style of each single line could be customized by CSS and different from others. </div>

 

html容器样式:

.test-text {
    font-family:"Aleo Regular","Palatino Linotype",Palatino;
    width: 500px;
    margin: 0 auto;
    background: #ecfeff;
    color: #f60;
    font-size: 24px;
    padding: 25px;
    line-height: 1.667;
    word-wrap: break-word;   
    word-break: break-all;    text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

 

 JS引用:

<script src="http://http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>

 

所以我们实现的重点是:换行点~~~

之前说过,我们的想法就是逐个遍历已经拆分好的单词,通过对比当前单词与其后一个单词是否在同一行位置来确定换行点;

通过判断offset().top的差值来确定是否同行,JS代码也很简单:

 1 $(document).ready(function(){
 2     var Dom = $("#test");    
 3     Dom.lettering('words').children('span').each(function(){
 4         var $this = $(this), next = $this.next();       
 5             if(next.length!=0){
 6                 if(Math.abs(next.offset().top - $this.offset().top) > 5 ){
 7                     $this.after("<br />");    
 8                 }    
 9             }
10     });
11 });

 这样子就可以实现动态添加<br>来为文本换行啦~~~

 

还有一个问题,如何对每一行文本的样式进行区分自定义呢?考虑到我朋友说过,这个效果只需要兼容最新的Chrome浏览器即可,我首先想到的是用CSS3实现,换行点都找到了,那还不简单吗?

 

更新JS如下(添加了换行点特殊类名)

 1 $(document).ready(function(){
 2     var Dom = $("#test");    
 3     var lineCount = 0;
 4     Dom.lettering('words').children('span').addClass("word").each(function(){
 5         var $this = $(this), next = $this.next();       
 6             if(next.length!=0){
 7                 if(Math.abs(next.offset().top - $this.offset().top) > 5 ){
 8                     $this.addClass("break-point-"+(++lineCount)).after("<br />");    
 9                 }    
10             }
11     });
12 });

 

新增如下CSS如下(这个CSS实现方式有点SB,需要最大量度定义多行的样式,这里只是传达思想,实现方式有很多~~)

.test-text .word{
    display:inline-block;  
}
.test-text .break-point-1 ~ span{
    font-size:30px;
    color:#333;
}
.test-text .break-point-2 ~ span{
    color:#036;
    font-size:15px;
}
.test-text .break-point-3 ~ span{
    color:#FC0;
    font-size:22px;
}
.test-text .break-point-4 ~ span{
    color:#090;
    font-size:18px;
}
.test-text .break-point-5 ~ span{
    font-size:26px;
    color:#930;
}
.test-text .break-point-6 ~ span{
    color:#93C;
    font-size:34px;
}
.test-text .break-point-7 ~ span{
    color:#f60;
    font-size:38px;
}
.test-text .break-point-8 ~ span{
    color:#002569;
    font-size:46px;
}
.test-text .break-point-9 ~ span{
    font-size:10px;
    color:darkgreen;
}
.test-text .break-point-10 ~ span{
    color:lightblue;
    font-size:33px;
}
.test-text .break-point-11 ~ span{
    color:yellow;
    font-size:16px;
}
.test-text .break-point-12 ~ span{
    color:green;
    font-size:16px;
}
.test-text .break-point-13 ~ span{
    color:ruby;
    font-size:14px;
}
.test-text .break-point-14 ~ span{
    color:purple;
    font-size:11px;
}
.test-text .break-point-15 ~ span{
    color:pink;
    font-size:12px;
}
.test-text .break-point-16 ~ span{
    color:gray;
    font-size:16px;
}

 

可以参考我做好的demo:  

http://jsfiddle.net/divayang/697ynekh/

http://jsfiddle.net/divayang/697ynekh/5/

 

文章评论

2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员都该阅读的书
程序员都该阅读的书
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
老程序员的下场
老程序员的下场
漫画:程序员的工作
漫画:程序员的工作
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员必看的十大电影
程序员必看的十大电影
每天工作4小时的程序员
每天工作4小时的程序员
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
一个程序员的时间管理
一个程序员的时间管理
那些争议最大的编程观点
那些争议最大的编程观点
Java程序员必看电影
Java程序员必看电影
中美印日四国程序员比较
中美印日四国程序员比较
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
如何成为一名黑客
如何成为一名黑客
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
旅行,写作,编程
旅行,写作,编程
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
我是如何打败拖延症的
我是如何打败拖延症的
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员和编码员之间的区别
程序员和编码员之间的区别
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
编程语言是女人
编程语言是女人
代码女神横空出世
代码女神横空出世
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
10个调试和排错的小建议
10个调试和排错的小建议
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
为什么程序员都是夜猫子
为什么程序员都是夜猫子
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员的鄙视链
程序员的鄙视链
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有