sparkle.jquery.js是一款可以制作炫酷的星星闪耀效果的jQuery插件。该插件基于SVG来制作星星闪耀效果,你可以控制星星的颜色,边框色,大小,延迟时间等属性。
使用方法
使用该星星闪耀插件需要在页面中引入sparkle.css,jQuery和sparkle.jquery.js文件。
< link rel = "stylesheet" type = "text/css" href = "css/sparkle.css" > < script type = "text/javascript" src = "js/jquery.min.js" ></ script > < script type = "text/javascript" src = "js/sparkle.jquery.js" ></ script > |
HTML结构
可以直接使用一个<div>
元素来包裹要制作星星闪耀效果的文本。
< div id = "main" > jQuery之家 </ div > |
CSS样式
文本要足够大才会有较好的效果,另外背景色要使用较深的颜色。
body { background-color : #1d1f20 ; margin : 0 ; padding : 20px ; } #main { color : #666 ; display : inline-block ; font-size : 200% ; font-weight : bold ; } |
初始化插件
在页面DOM元素加载完毕之后,可以通过sparkle()
方法来初始化该星星闪耀特效插件。
$( "#main" ).sparkle(); |
你也可以在同一个元素上添加多个星星闪耀效果。
$( "#main" ).sparkle({ size: 30 }).sparkle({ size: 30 }).sparkle({ delay: 1000, size: 10, pause: 750 }); |
如果要销毁这个星星闪耀特效,可以使用下面的语句:
$( "#main" ).sparkle( "destroy" ); |
配置参数
参数 | 默认值 | 描述 |
fill | “#fff” | 星星的填充颜色。 |
stroke | “#000” | 星星的描边颜色。 |
size | 20 | 星星的尺寸,单位像素。 |
delay | 0 | 第一个星星出现前的延迟时间,单位毫秒。 |
duration | 1500 | 星星闪耀的持续时间,单位毫秒。 |
pause | 1000 | 两个星星之间的延迟时间,单位毫秒。 |
jquery-sparkle星星闪耀特效插件的github地址为:https://github.com/maxspeicher/jquery-sparkle
网盘下载密码:7smg