插件 jQuery.twinkle 中文API文档
🌙
手机阅读
本文目录结构
插件 jQuery.twinkle 中文API文档
源码 & 下载
- Github地址:https://github.com/lrsjng/jquery-twinkle
- 源码下载: -
- 效果演示: -
快速开始
在指定元素处闪烁:
$(selector).twinkle();
选择效果并添加一些效果选项:
var options = {
'effect': 'drop',
'effectOptions': {
'color': 'rgba(0,0,255,0.5)',
'radius': 100
}
};
$(selector).twinkle(options);
选项
Options {
// position the effect horizontal inside the element
widthRatio: 0.5
// position the effect vertical inside the element
heightRatio: 0.5
// effect ID
effect: 'splash'
// custom effect options
effectOptions: undefined
// function to be called after effect finished
callback: undefined
}
效果
‘splash’(画布)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000
}
‘drop’(画布)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000,
width: 2
}
‘drop’(画布)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000,
width: 2,
count: 3,
delay: 100
}
‘脉冲’(画布)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 100,
duration: 3000
}
‘orbit’(画布)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 100,
duration: 3000,
satellites: 10,
satellitesRadius: 10,
circulations: 1.5
}
‘splash-css’(CSS3)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000
}
‘drop-css’(CSS3)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000,
width: 2
}
‘drops -css’(CSS3)
EffectOptions {
color: 'rgba(255,0,0,0.5)',
radius: 300,
duration: 1000,
width: 2,
count: 3,
delay: 300
}