jquery.arctext.js怎么用
最新回答
如梦如幻
2025-02-24 10:52:42
我们可以单独利用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即可
热门标签
