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的基本操作,熟悉CSS3动画和过渡效果,以及适时利用现有的jQuery插件。通过这些技术,你可以为网页创造出吸引眼球的文字动画,提升用户体验。在实际项目中,不断学习...
"jQuery插件集之(按钮特效)+Demo"提供了一个实践性的资源,包括插件、演示示例以及源代码,帮助开发者实现各种各样的按钮效果,如鼠标移入移除的交互和自定义按钮样式。 首先,我们来理解jQuery插件的基本结构。一...
在本文中,我们将深入探讨如何使用jQuery插件BoxScroll实现图片轮播特效。BoxScroll是一个简单易用的jQuery插件,适用于创建具有数字列表或左右箭头控制的常见图片轮播效果。它允许用户轻松地展示多张图片,并提供...
使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 ...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包...
在本文中,我们将深入探讨"jQuery超酷文字淡入淡出显示特效"这一主题,它是一种使用reveal-it.js插件实现的动态文字展示技术。这个特效插件为网页设计带来了新颖且引人注目的视觉体验,尤其适用于创建吸引人的标题或...
**jQuery文字动画特效插件详解** 在Web开发中,动态效果常常能提升用户体验,增加页面的吸引力。"jQuery文字动画特效插件"就是这样一款工具,它利用jQuery库的强大功能,结合animate.css,为网页中的文字元素添加...
jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件 使用JavaScript格式输出日期输出的jQuery dateformat插件- 拥有的,jQuery是最小的日期格式库。 ! 安装下载最新的jquery.dateFormat.js 或者 jquery....
《jQuery实现随机数字字母验证码插件特效源码详解》 在网页开发中,验证码是一种防止自动机器人或恶意用户进行非法操作的重要手段。本篇文章将详细解析一个基于jQuery实现的随机数字字母验证码插件特效源码,帮助...
在网页设计领域,jQuery抽奖插件是实现互动体验、提升用户体验的重要工具。本篇文章将详细探讨jQuery抽奖插件的工作原理、核心功能以及在实际项目中的应用。 一、jQuery抽奖插件概述 jQuery抽奖插件通常是一段封装...
"最新各类jquery特效插件&前端必备"这个主题涵盖了jQuery在现代Web开发中的广泛应用,包括3D标签、表单处理、表格操作、弹出层、窗口管理、导航设计、评分系统、时间与日历组件、进度条、图片处理、文字动画、广告...
1. `index.html`:这是主网页文件,其中包含了实现插件效果的HTML结构、CSS样式和JavaScript代码。 2. `readme.html`:这个文件通常包含插件的使用说明、版本信息、作者信息以及可能的许可协议等详细资料。 3. `13....
《jQuery实现多种鼠标悬停后文字特效》 在网页设计中,交互性的增强能提升用户体验,使得用户在浏览过程中更加投入。jQuery作为一个轻量级的JavaScript库,为开发者提供了丰富的功能,包括各种动画效果和事件处理,...
总之,jQuery提供了一种简单而强大的方式来实现鼠标悬停文字特效。通过结合CSS样式和jQuery事件处理,我们可以创建各种引人注目的用户交互体验,提升网站的视觉吸引力和用户体验。请记住,实际效果可能需要根据具体...
jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...
在本项目中,"jquery实现叠层3D文字特效.zip" 是一个利用jQuery库创建的交互式3D文字效果的示例。这个效果的特点在于它没有依赖HTML5或CSS3的新特性,而是完全通过JavaScript(具体是jQuery)来实现,这在某些浏览器...
总的来说,Dreamwever jQuery插件是Web开发者的得力助手,它使复杂的功能实现变得简单,降低了开发门槛,提高了代码质量和开发速度。通过深入学习和实践,开发者能够充分利用这个工具,创建出富有互动性和用户体验...
综上所述,"waterfloat"是一款基于jQuery的特效插件,利用CSS3动画和JavaScript编程实现了元素在水面浮动的动态效果,提供了一种创新的方式增强网页的视觉体验。通过理解jQuery库、CSS3动画、JavaScript事件处理等...
3. **jQuery插件**:对于Eclipse,有几种插件可以实现jQuery支持,例如“JSDT (JavaScript Development Tools)”和“WTP (Web Tools Platform)”。它们通过集成jQuery的库信息,提供了代码完成、语法高亮和错误检测...