`

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

阅读更多
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实现炫彩文字特效需要掌握jQuery的基本操作,熟悉CSS3动画和过渡效果,以及适时利用现有的jQuery插件。通过这些技术,你可以为网页创造出吸引眼球的文字动画,提升用户体验。在实际项目中,不断学习...

    jQuery插件集之(按钮特效)+Demo

    "jQuery插件集之(按钮特效)+Demo"提供了一个实践性的资源,包括插件、演示示例以及源代码,帮助开发者实现各种各样的按钮效果,如鼠标移入移除的交互和自定义按钮样式。 首先,我们来理解jQuery插件的基本结构。一...

    jQuery插件boxScroll实现图片轮播特效

    在本文中,我们将深入探讨如何使用jQuery插件BoxScroll实现图片轮播特效。BoxScroll是一个简单易用的jQuery插件,适用于创建具有数字列表或左右箭头控制的常见图片轮播效果。它允许用户轻松地展示多张图片,并提供...

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 ...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar

    jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果.rar jQuery插件-实现HTML5微信红包...

    jQuery超酷文字淡入淡出显示特效

    在本文中,我们将深入探讨"jQuery超酷文字淡入淡出显示特效"这一主题,它是一种使用reveal-it.js插件实现的动态文字展示技术。这个特效插件为网页设计带来了新颖且引人注目的视觉体验,尤其适用于创建吸引人的标题或...

    jQuery文字动画特效插件

    **jQuery文字动画特效插件详解** 在Web开发中,动态效果常常能提升用户体验,增加页面的吸引力。"jQuery文字动画特效插件"就是这样一款工具,它利用jQuery库的强大功能,结合animate.css,为网页中的文字元素添加...

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件.zip

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件 使用JavaScript格式输出日期输出的jQuery dateformat插件- 拥有的,jQuery是最小的日期格式库。 ! 安装下载最新的jquery.dateFormat.js 或者 jquery....

    jQuery实现随机数字字母验证码插件特效源码.zip

    《jQuery实现随机数字字母验证码插件特效源码详解》 在网页开发中,验证码是一种防止自动机器人或恶意用户进行非法操作的重要手段。本篇文章将详细解析一个基于jQuery实现的随机数字字母验证码插件特效源码,帮助...

    jquery插件库-jquery抽奖插件.zip

    在网页设计领域,jQuery抽奖插件是实现互动体验、提升用户体验的重要工具。本篇文章将详细探讨jQuery抽奖插件的工作原理、核心功能以及在实际项目中的应用。 一、jQuery抽奖插件概述 jQuery抽奖插件通常是一段封装...

    最新各类jquery特效插件&前端必备

    "最新各类jquery特效插件&前端必备"这个主题涵盖了jQuery在现代Web开发中的广泛应用,包括3D标签、表单处理、表格操作、弹出层、窗口管理、导航设计、评分系统、时间与日历组件、进度条、图片处理、文字动画、广告...

    实现背景图片镜头模糊特效的jQuery插件

    1. `index.html`:这是主网页文件,其中包含了实现插件效果的HTML结构、CSS样式和JavaScript代码。 2. `readme.html`:这个文件通常包含插件的使用说明、版本信息、作者信息以及可能的许可协议等详细资料。 3. `13....

    jQuery实现多种鼠标悬停后文字特效.zip

    《jQuery实现多种鼠标悬停后文字特效》 在网页设计中,交互性的增强能提升用户体验,使得用户在浏览过程中更加投入。jQuery作为一个轻量级的JavaScript库,为开发者提供了丰富的功能,包括各种动画效果和事件处理,...

    jQuery实现多种鼠标悬停后文字特效

    总之,jQuery提供了一种简单而强大的方式来实现鼠标悬停文字特效。通过结合CSS样式和jQuery事件处理,我们可以创建各种引人注目的用户交互体验,提升网站的视觉吸引力和用户体验。请记住,实际效果可能需要根据具体...

    jQuery插件,jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...

    jquery实现叠层3D文字特效.zip

    在本项目中,"jquery实现叠层3D文字特效.zip" 是一个利用jQuery库创建的交互式3D文字效果的示例。这个效果的特点在于它没有依赖HTML5或CSS3的新特性,而是完全通过JavaScript(具体是jQuery)来实现,这在某些浏览器...

    dreamwever jQuery 插件

    总的来说,Dreamwever jQuery插件是Web开发者的得力助手,它使复杂的功能实现变得简单,降低了开发门槛,提高了代码质量和开发速度。通过深入学习和实践,开发者能够充分利用这个工具,创建出富有互动性和用户体验...

    实现元素漂浮在水面特效的jQuery插件

    综上所述,"waterfloat"是一款基于jQuery的特效插件,利用CSS3动画和JavaScript编程实现了元素在水面浮动的动态效果,提供了一种创新的方式增强网页的视觉体验。通过理解jQuery库、CSS3动画、JavaScript事件处理等...

    eclipse上支持jquery插件

    3. **jQuery插件**:对于Eclipse,有几种插件可以实现jQuery支持,例如“JSDT (JavaScript Development Tools)”和“WTP (Web Tools Platform)”。它们通过集成jQuery的库信息,提供了代码完成、语法高亮和错误检测...

Global site tag (gtag.js) - Google Analytics