jquery.arctext.js怎么用

发布网友发布时间：2022-05-13 04:28

共2个回答

懂视网时间：2022-05-13 08:50

　　Arctext.js 是基于 Lettering.js 的文本旋转插件，根据设置的旋转半径准确计算每个字母的旋转弧度并均匀分布。虽然 CSS3 也能够实现字符旋转效果，但是要让安排每个字母都沿着弯曲路径排布相当的复杂，结合 Arctext.js 则可以轻松实现这个效果。

效果演示插件下载

热心网友时间：2022-05-13 05:58

Arctext.js自定义圆弧形文字路径的jQuery插件
我们可以单独利用CSS3技术去自定义文字旋转路径，但是如果是像如图片所示让文字沿着某个路径去排列还是有点麻烦的，Arctext.js作为一款简单的jQuery插件，就可以帮助我们实现这一效果。

下载文件中为我们免费提供了4种不同的路径效果，使用起来也很简单。
添加HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
var $headline = $('#headline').hide();

var $word1 = $('#arc-wrapper').find('h3').hide();
var $word2 = $('#arc-wrapper').find('h4').hide();

var $example1 = $('#example1').hide();
var $example2 = $('#example2').hide();
var $example3 = $('#example3').hide();
var $example4 = $('#example4').hide();

google.load('webfont','1');

google.setOnLoadCallback(function() {
WebFont.load({
google : {
families : ['Montserrat','Concert One']
},
fontactive : function(fontFamily, fontDescription) {
init();
},
fontinactive : function(fontFamily, fontDescription) {
init();
}
});
});

function init() {

$headline.show().arctext({radius: 400});

$word1.show().arctext();
$word2.show().arctext({radius: 148, 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;
});

};
</script/>

自定义添加文字

<section class="main">
<div id="arc-wrapper" class="arc-wrapper">
<h3>Just ♦ bend ♦ your ♦ text</h3>
<h4>ABCDEFG</h4>
</div>
</section>
<div class="example">
<h3 id="example1">I wanna be curved</h3>
</div>
<div class="example">
<h3 id="example2">I wanna be different</h3>
</div>
...

如果你想添加更多的路径文字只需要按照上面所说的添加example即可