软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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