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

novacancy.js是一款非常有意思的、效果绚丽的jQuery绚丽霓虹灯文字特效插件。该文字特效插件可以将任意文本转换为霓虹灯效果,你可以设置灯光的颜色,发光的颜色,几个文字是不亮灯状态,以及灯光闪烁的频率等等。

使用方法

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

HTML结构

该该霓虹灯文字特效的HTML结构非常简单,可以使用

等常用的文本标签来组织文字。也可以将这些文字包裹到一个

容器中,方便定位。

No

Vacancy

JAVASCRIPT

在页面加载完毕之后,使用下面的方法来调用该霓虹灯文字特效插件。

$('#no').novacancy();

插件初始化时也可以传入不同的定制参数。

$('#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');

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值