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插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 ...
jQuery实现炫彩文字特效效果插件。。。。效果你知道的。。。有帮助就下。。
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
这是一款jQuery文字动画特效插件。该jquery文字动画插件结合animate.css一起使用,可以制作出各种炫酷的文字动画特效。
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件 使用JavaScript格式输出日期输出的jQuery dateformat插件- 拥有的,jQuery是最小的日期格式库。 ! 安装下载最新的jquery.dateFormat.js 或者 jquery....
JavaScript实现的ajax城市选择控件源代码.rar jcarousellite图片滚动.rar JQuery Tab.rar JQuery zTree v3.1.zip jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动.rar jQuery&CSS图形下拉菜单.rar jQuery...
CSS3 jquery结合anime.js插件实现18款炫丽文字动画特效,源码中包括了演示文件、js文件和css代码。 打开index.html页面后,向下拖动滚动条,可查看这18种文字特效,每款都可通过控制按钮来预览动画效果。 anime....
资源名称:jquery插件特效 WORD版内容简介:本文档主要讲述的是jquery插件特效;jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。jQuery 是一个快速的,简洁...
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery限制最大输入数字插件特效 三种jquery特效,效仿新浪微博!
jQuery实现彩虹文字效果 jQuery实现彩虹文字效果网页特效.zip
reveal-it.js是一款jQuery文字淡入淡出显示特效插件。该文字特效插件可以使文字从左向右淡入淡出显示。该插件小巧简单,非常适合用于制作标题文字的动画效果。
一套基于jquery或javascript的插件库 - 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件
4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. ...
jQuery打印插件PrintArea实现
一个JQuery插件 - Javascript可拖动的模式窗口
自己封装的jquery插件@实现了简单的轮播图以及图片点击后的回调实现,自动播放等,
用jquery实现的进度条插件,使用非常简单,可用做程序进度显示或AJAX文件上传