免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

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

时间:01-29 14:05 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  CSS3可以帮助我们旋转字体,但是如果想让一行字体产生弧度曲线的效果,稍微有点儿费劲。今天分享一个jQuery插件:Arctext.js ,可以有效的帮助我们生成一行带有弧度的文字

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

在线演示

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

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈