http://www.biuuu.com/p837.html
一般我们使用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文字输入特效通过简单的JavaScript代码即可实现,具有高度的可定制性和扩展性。在实际应用中,开发者可以根据需求进行调整,打造出独具特色的网页动态效果,提升用户交互体验。无论是新手还是经验丰富的...
在本资源"jQuery表单复选框与单选框美化特效.zip"中,您将找到一个使用jQuery实现的表单复选框和单选框美化效果的实例。这个压缩包包含四个主要文件:index.html(主页面)、font(字体文件夹)、js(JavaScript...
41. Font Effect JQuery:提供文字特效,增强文字表现力。 42. JQuery Media Plugin:多媒体播放器插件,支持音频和视频。 43. JQuery JFlot:基于Flot的图表插件,用于数据可视化。 44. Horizontal Accordion:水平...
jQuery Cookie是一种在JavaScript库jQuery基础上实现的用于存储和读取浏览器Cookie的小型插件。Cookie在Web开发中扮演着重要角色,它可以帮助我们保存用户的偏好设置、会话信息等数据,即使用户关闭并重新打开浏览器...
通过使用Faker生成假数据进行测试,jQuery处理用户交互,Typewriter Effect增加趣味性,Swiper实现滑动展示,Font-Awesome提供专业图标,以及JavaScript作为基础脚本语言,这个项目确保了用户体验和后台功能的完善。...