当前位置：首页 > 网页特效 > 文字效果

jQuery绚丽霓虹灯文字特效插件

分类：文字效果日期：2024-05-14 点击(0) 评论(0)

jQuery绚丽霓虹灯文字特效插件

简介

使用该霓虹灯文字特效插件首先要引入jQuery和jquery.novacancy.js文件。

```html
<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容器中，方便定位。

```html
<div class="board">
    <p id="no">No</p>
    <p id="vacancy">Vacancy</p>
</div> 
```               
#####  JAVASCRIPT
在页面加载完毕之后，使用下面的方法来调用该霓虹灯文字特效插件。

```html
$('#no').novacancy();  
```              
插件初始化时也可以传入不同的定制参数。

```html
$('#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。可选项。|
灯光颜色例子：

```html
Hexadecimal: '#ffffff'
RGB: 'rgb(255,255,255)'
RGBA: 'rgba(255,255,255,1)'
Text: 'WHITE'    
```         
####  控制

------------

##### 触发灯光闪烁

```html
$('#no').trigger('blinkOn');  
```              
##### 关闭灯光闪烁

```html
$('#no').trigger('blinkOff'); 
```