sparkle.jquery.js-基于SVG的jQuery星星闪耀特效插件
jopen 9年前
sparkle.jquery.js是一款可以制作炫酷的星星闪耀效果的 jQuery插件 。该插件基于 SVG 来制作星星闪耀效果,你可以控制星星的颜色,边框色,大小,延迟时间等属性。
使用方法
使用该星星闪耀插件需要在页面中引入sparkle.css,jQuery和sparkle.jquery.js文件。
HTML结构
可以直接使用一个
元素来包裹要制作星星闪耀效果的文本。
jQuery之家
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");
配置参数
来源:http://www.htmleaf.com/html5/SVG/201602283157.html
</div> </div>