有趣的jQuery动态文字插件funnyText.js

一款有趣的jQuery动态文字插件funnyText.js，自动针对每一个文字运行不同的动画效果，有文字滚动的，有文字滑动的，类似于户外的一些广告灯箱的效果。

分类：文字特效 > 文字滚动难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面元素的样式文件，并简单设置演示样式，代码如下：

<link type="text/css" rel="stylesheet" href="./css/jquery.funnyText.css" />
<style type="text/css">
.text1, .text2{
	display:block;
	text-align:center;
}
body{
	font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.text2 span {
	background-color: #DFE2DB;
}
.text2 span.active {
	background-color: #3B3738;
}
/* Web design
* --------------------------------------- */
.table{
	display:table;
	width:100%;
	height: 100%;
}
.tableCell{
	display:table-cell;
	vertical-align: middle;
	width:100%;
	height: 100%;
}
body, html{
	margin:0;
	padding:0;
	height:100%;
	background-color: #00AEEF;
	background-color: #00AEEF;
}
</style>

接着引入jQuery库、jQuery UI和funnyText插件，并启用插件设置好对应参数，代码如下：

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>	
<script type="text/javascript" src="./js/jquery.funnyText.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.text1').funnyText({
		speed: 700,
		activeColor: '#fff',
		color: 'black',
		fontSize: '7em'
	});
	
	$('.text2').funnyText({
		speed: 700,
		fontSize: '6em',
		color: '#191919',
		activeColor: '#fff',
		borderColor: 'black'
	});
});
</script>

页面的底部，需设置好演示文字的容器，代码如下：

<div class="table">
	<div class="tableCell">
		<div class="text1"> funnyText.js</div>
		<div class="text2"> 有趣的动态文字插件 </div>
	</div>
</div>