Mutiline-Text-Styling-for-English

利用JQuery.lettering.js实现自定义多行文本样式 - 只支持英文

HTML

<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<h1 align="center">利用JQuery.lettering.js实现自定义多行文本样式(只支持英文)</h1>
<p  align="center"><input type="text" id="input" placeholder="请输入内容~" x-webkit-grammar="builtin:translate" x-webkit-speech onwebkitspeechchange="onInputChange()" /></p>
<div class="test-text" id="test">We wish you a merry Christmas and a very happy new year! Congratulations for all you guys here!</div>

CSS

.test-text {
    font-family:"Aleo Regular","Palatino Linotype",Palatino;
	width: 300px;
	margin: 0 auto;
	background: lightgray;
	color: #f52800;
	font-size: 22px;
	text-align:center;
	border-radius: 10px;
	padding: 20px;
	line-height: 1.667;
    word-wrap:break-word;   
    word-break:break-all;   
	box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,.6);
	text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.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;
}

JavaScript

if (document.createElement("input").webkitSpeech === undefined) {  
    alert("您的浏览器不支持<input />语音输入功能~");  
} 

//定义文本输入框输入框处理事件
function onInputChange(){   
    $("#test").text($("#input").val());  
    renderText($("#test"));
}

//定义文本渲染方法
function renderText(_Target){
	var Dom = $(_Target);	
	var lineCount = 0;
	var tempText = Dom.text().replace(/\s{2,}/g," ").replace(/^\s+|\s+$/,"");//Trim white space		
	Dom.text(tempTe);
	
	// Apply lettering effect here to make sure it gets done
    Dom.lettering('words').children('span').addClass("word").each(function(){
		var $this = $(this), next = $this.next();       
        //setTimeout(function(){         
            if(next.length!=0){
                if(Math.abs(next.offset().top - $this.offset().top) > 5 ){
                    $this.addClass("break-point-"+(++lineCount)).after("<br />");	
                }	
            }
       // },12);
	});
    Dom.addClass("total-line-"+(++lineCount));
}

//文档载入完成
$(document).ready(function(){    
    //为文本输入框绑定输入监听事件
    $("#input").on("input",onInputChange);
    
    //默认执行一次渲染
    renderText($("#test"));
});