分享一个使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js

日期：2012/01/26  来源：GBin1.com

在线演示  本地下载

CSS3可以帮助我们旋转字体，但是如果想让一行字体产生弧度曲线的效果，稍微有点儿费劲。今天分享一个jQuery插件：Arctext.js ， 可以有效的帮助我们生成一行带有弧度的文字效果。它能够自动计算正确的旋转角度，并且生成对应的CSS3。希望大家喜欢！

插件选项

• radius：0

最小的值是文字长度，如果设置为-1，则显示直线

• dir： 1

1：向下弯曲
2：向上弯曲

• rotate： true

如果为true，则每个字母都旋转

• fitText：false

如果你想尝试使用fitText插件，设置为true，记住包装的标签需要fluid布局

Javascript代码

function init() {

$headline.show().arctext({radius: 400});
	
$word1.show().arctext({radius: 148});
$word2.show().arctext({dir: -1});

$example1.show().arctext({radius: 300});
$example2.show().arctext({radius: 400, dir: -1});
$example3.show().arctext({radius: 500, rotate: false});
$example4.show().arctext({radius: 300});

$('#button_set').on('click', function() {
	$example4.arctext('set', {
		radius		: 140,
		dir			: -1
	});
	return false;
});
$('#button_anim1').on('click', function() {
	$example4.arctext('set', {
		radius		: 300, 
		dir			: -1,
		animation	: {
			speed	: 300,
			easing  : 'ease-out'
		}
	});
	return false;
});
$('#button_anim2').on('click', function() {
	$example4.arctext('set', {
		radius		: 200, 
		dir			: 1, 
		animation	: {
			speed	: 300
		}
	});
	return false;
});
$('#button_reset').on('click', function() {
	$example4.arctext('set', {
		radius		: 300, 
		dir			: 1
	});
	return false;
});

};

来源： 分享一个使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js