js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件

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;

});

};

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...相关推荐

另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
帮助你在移动设备上生成倾斜控制（重力控制）的旋转效果jQuery插件 - lenticular.js...
为什么80%的码农都做不了架构师?>>> 日期:2012-9-27 来源:GBin1.com 在线演示相信大家如果使用过iphone/ipad的话,肯定对于倾斜控制(重力 ...
实现文字平滑弯曲弧形效果的插件-arctext.js
扇形的文字有时候产品大佬就是很任性,说做一个宣传页,一个类似拱门的效果,每次文字不一样,但是文字得呈现拱形状,类似上图啦. 尝试自己使用canvas画和css3的rotate旋转div,两种方法都是 ...
帮助你生成超酷计时器和时钟效果的jQuery插件 - FlipClock.js
为什么80%的码农都做不了架构师?>>> 日期:2013-6-6 来源:GBin1.com 在线演示 FlipClock.js 是一款功能强大并且支持自定义的时钟和计时器的j ...
html5 滚屏效果插件,jQuery插件fullPage.js实现全屏滚动效果
本文实例为大家分享了全屏滚动插件fullPage.js的具体使用方法,供大家参考,具体内容如下 0.01 基本演示的HTML 布局以及js 代码 //需要连接连接的三个文件 //css文件 / ...
10个用来处理键盘事件的JQuery插件和JS类库
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用的快捷键次数可能会相对比较少,但是对于熟练的专业人员来说,使用键盘可能更加容易并且更加快速,在今天这 ...
jQuery插件stickup.js 源码解析初步
这里只是一个初步的解析 stickup.js是一个简单的jQuery插件,源代码只有100多行,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现 ...
我的世界会员特效在服务器显示,腐竹教你在游戏中制作登录提示效果
来源:游戏园日期:2019-02-03 04:01:08 今天小编为大家带来我的世界登入提示教程,让大家知道登入提示怎么才能在游戏中显示出来,让你的服务器高大上! 这个东西做完以后成品是这样的: 1. ...
jQuery插件-json2.js
from:http://blog.csdn.net/gjb724332682/article/details/46682743 前言 json2.js是一个json插件,下载地址:https://gi ...

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...相关推荐

最新文章

热门文章

js特效 在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...

js特效 在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...相关推荐

最新文章

热门文章

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...

js特效在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...相关推荐