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

中关村村草

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

CSS3可以帮助我们旋转字体，但是如果想让一行字体产生弧度曲线的效果，稍微有点儿费劲。今天分享一个jQuery插件：Arctext.js ， 可以有效的帮助我们生成一行带有弧度的文字效果。它能够自动计算正确的旋转角度，并且生成对应的CSS3。希望大家喜欢！





Js代码

1. 1.function init() {  
   
2. 2.  
   
3. 3.$headline.show().arctext({radius: 400});  
   
4. 4.      
   
5. 5.$word1.show().arctext({radius: 148});  
   
6. 6.$word2.show().arctext({dir: -1});  
   
7. 7.  
   
8. 8.$example1.show().arctext({radius: 300});  
   
9. 9.$example2.show().arctext({radius: 400, dir: -1});  
   
10. 10.$example3.show().arctext({radius: 500, rotate: false});  
    
11. 11.$example4.show().arctext({radius: 300});  
    
12. 12.  
    
13. 13.$('#button_set').on('click', function() {  
    
14. 14.    $example4.arctext('set', {  
    
15. 15.        radius      : 140,  
    
16. 16.        dir         : -1  
    
17. 17.    });  
    
18. 18.    return false;  
    
19. 19.});  
    
20. 20.$('#button_anim1').on('click', function() {  
    
21. 21.    $example4.arctext('set', {  
    
22. 22.        radius      : 300,   
    
23. 23.        dir         : -1,  
    
24. 24.        animation   : {  
    
25. 25.            speed   : 300,  
    
26. 26.            easing  : 'ease-out'  
    
27. 27.        }  
    
28. 28.    });  
    
29. 29.    return false;  
    
30. 30.});  
    
31. 31.$('#button_anim2').on('click', function() {  
    
32. 32.    $example4.arctext('set', {  
    
33. 33.        radius      : 200,   
    
34. 34.        dir         : 1,   
    
35. 35.        animation   : {  
    
36. 36.            speed   : 300  
    
37. 37.        }  
    
38. 38.    });  
    
39. 39.    return false;  
    
40. 40.});  
    
41. 41.$('#button_reset').on('click', function() {  
    
42. 42.    $example4.arctext('set', {  
    
43. 43.        radius      : 300,   
    
44. 44.        dir         : 1  
    
45. 45.    });  
    
46. 46.    return false;  
    
47. 47.});  
    
48. 48.  
    
49. 49.};  

复制代码

如果有一天21

谢谢分享

sychangchun

这个插件应该不错。借了jWuerty的光啊。