0
点赞
收藏
分享

微信扫一扫

jQuery插件Font effect实现Javascript文字特效


一般我们使用CSS给网页字体增加特效,但显示的效果非常有限,同时受浏览器兼容性影响,这里介绍一个jQuery插件Font effect字体特效,可给网页文本增加轮廓线(outline)、阴影(Shadow)、渐变(Gradient )和反射(Mirror)效果,同时这几种效果可以混合使用,使用非常简单,效果图如下:

使用说明
需要使用jQuery库文件(1.3.2)和Font effect字体特效库文件(1.0.0)

使用实例(outline实例)
一,包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.js"></script> 

   2. <script type="text/javascript" src="jquery-FontEffect-1.0.0.min.js"></script>



二,HTML部分

1. <DIV id='example0'>Outline</DIV>



三,Javascript部分

1. <script type="text/javascript"> 

   2. jQuery(document).ready(function(){ 

   3. $('#example0').FontEffect({ outline:true }) 

   4. </script>



四,CSS部分

#example0{ font-family :"Impact"; color :#fff; font-size :3em; }



如上实例使用非常简单,几行代码就实现了一个给网页文本增加轮廓线(outline)的效果。

其它实例:

一,增加阴影(Shadow)实例

1,javascript部分:$('#example1').FontEffect({ shadow:true })

2,CSS部分:#example1{ font-family :"Impact"; color :#000; font-size :3em; }

3,HTML部分:<DIV id='example1'> Shadow </DIV>

二,增加渐变(Gradient )实例

1,javascript部分:$('#example2').FontEffect({ gradient:true })

2,CSS部分:#example2{ font-family :"Impact"; color :#000; font-size :3em; }

3,HTML部分:<DIV id='example2'>  Gradient </DIV>

三,增加反射(Mirror)实例

1,javascript部分:$('#example3').FontEffect({ mirror:true })

2,CSS部分:#example3{ font-family :"Impact"; margin-bottom:30px; color :#000; font-size :3em; }

3,HTML部分:<DIV id='example3'>  Mirror </DIV>

附Font effect参数清单(可自定义设置相关效果)

1. outline :false, 

   2. outlineColor1 :"", 

   3. outlineColor2 :"", 

   4. outlineWeight :1, 

   5. 

   6. mirror :false, 

   7. mirrorColor :"" 

   8. mirrorOffset :-10, 

   9. mirrorHeight :50, 

  10. mirrorDetail :1, 

  11. mirrorTLength :50, 

  12. mirrorTStart :0.2, 

  13. 

  14. shadow :false, 

  15. shadowColor :"#000", 

  16. shadowOffsetTop :5, 

  17. shadowOffsetLeft:5, 

  18. shadowBlur :1, 

  19. shadowOpacity :0.1, 

  20. 

  21. gradient :false, 

  22. gradientColor :"", 

  23. gradientPosition:20, 

  24. gradientLength :50, 

  25. gradientSteps :20, 

  26. hideText :false,


上面几个实例可以看出,要增加什么样的效果,只需要指定效果如(mirror:true)就可以给网页文本增加相对应的文字特效,值得推荐。
点我查看更多实例
http://www.iofo.it/jquery/fonteffect/

  • jquery-fonteffect-1.0.0.zip (7.4 KB)
  • 下载次数: 158
举报

相关推荐

0 条评论