网页下载地址:http://www./jQuery/Text-Link-Effects/201504111661.html
novacancy.js是一款非常有意思的、效果绚丽的jQuery绚丽霓虹灯文字特效插件。该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光闪烁的频率等等。
使用方法
使用该霓虹灯文字特效插件首先要引入jQuery和jquery.novacancy.js 文件。
< script type = "text/javascript" src = "js/jquery.min.js" ></ script >
< script type = "text/javascript" src = "js/jquery.novacancy.js" ></ script >
|
HTML结构
该该霓虹灯文字特效的HTML结构非常简单,可以使用<p> 、<h1> 等常用的文本标签来组织文字。也可以将这些文字包裹到一个<div> 容器中,方便定位。
< div class = "board" >
< p id = "no" >No</ p >
< p id = "vacancy" >Vacancy</ p >
</ div >
|
JAVASCRIPT
在页面加载完毕之后,使用下面的方法来调用该霓虹灯文字特效插件。
插件初始化时也可以传入不同的定制参数。
$( '#no' ).novacancy({
'reblinkProbability' : 0.1,
'blinkMin' : 0.2,
'blinkMax' : 0.6,
'loopMin' : 8,
'loopMax' : 10,
'color' : '#ffffff' ,
'glow' : [ '0 0 80px #ffffff' , '0 0 30px #008000' , '0 0 6px #0000ff' ],
'off' : 1,
'blink' : 1,
'classOn' : 'on' ,
'classOff' : 'off' ,
'autoOn' : true
});
|
配置参数
- reblinkProbability:类型:Number。灯光闪烁的概率,取值0-1,默认值:1/3。可选项。
- blinkMin:类型:Number。灯光闪烁的最小值。默认值0.01。单位:秒。可选项。
- blinkMax:类型:Number。灯光闪烁的最大值。默认值0.5。单位:秒。可选项。
- loopMin:类型:Number。触发霓虹灯闪烁的最小时间。默认值0.5。单位:秒。可选项。
- loopMax:类型:Number。触发霓虹灯闪烁的最大时间。默认值2。单位:秒。可选项。
- color:类型:String。灯光的颜色。默认值:'ORANGE'。设置为null禁用该参数。可选项。
- glow:类型:Array。文本阴影颜色数组。默认值: ['0 0 80px Orange', '0 0 30px Red', '0 0 6px Yellow']。设置为null禁用该参数。可选项。
- off:类型:Number。灯光熄灭的字符的数量。默认值:0。可选项。
- blink:类型:Number。灯光闪烁的字符的数量。默认值:0,0表示所有的字符都闪烁。可选项。
- classOn:类型:String。亮灯字符上的class名称。默认值: 'on'。
- classOff:类型:String。熄灯字符上的class名称。默认值:'off'。
- autoOn:类型:Boolean。是否在初始化后文字自动灯光闪烁。默认值:true。可选项。
灯光颜色例子:
Hexadecimal: '#ffffff'
RGB: 'rgb(255,255,255)'
RGBA: 'rgba(255,255,255,1)'
Text: 'WHITE'
|
控制
触发灯光闪烁
$( '#no' ).trigger( 'blinkOn' );
|
关闭灯光闪烁
$( '#no' ).trigger( 'blinkOff' );
|
|