在页面中引入jquery和jquery-canvas-sparkles.js文件
<script src="https://p.erlangyun.com/jQuery/jQuery3.3.1.js?v=a"></script>
<script src="dist/jquery-canvas-sparkles.min.js"></script>
body满屏基本使用方法
jQuery(function(){
jQuery("body").sparkle({'count':500});
jQuery("body").off("mouseover.sparkle").off("mouseout.sparkle").off("focus.sparkle").off("blur.sparkle");
jQuery("body").trigger("start.sparkle");
});
插件的可用配置参数有
jQuery(function() {
jQuery("body").sparkle({
//颜色:接收HEX字符串,或者“rainbow”关键字,或一组HEX字符串
color: ["#2eafea", "#e56604"],
//一次显示星星的数量
count: 30,
// 距离canvas边部多少将会重叠
overlap: 0,
// 设置速度
speed: 1,
// 最小尺寸
minSize: 4,
// 最大尺寸
maxSize: 7,
//星星运动的方向,可以是"up", "down" 或 "both"
direction: "both"
});
});
还可以通过下面的事件来触发星星的开始、接收和改变尺寸
start.sparkle:触发星星开始闪烁。
stop.sparkle:结束星星闪烁。
resize.sparkle:动态修改canvas的尺寸,并改变星星的位置。
以上事件的例子
// 首先绑定一个dom
jQuery("body").sparkle();
//如果我们不希望默认事件触发,可以通过下面的方法阻止默认鼠标/键盘触发器
jQuery("body")
.off("mouseover.sparkle")
.off("mouseout.sparkle")
.off("focus.sparkle")
.off("blur.sparkle")
//还可以手动在元素上触发启动/停止事件
jQuery("body")
.trigger("start.sparkle")
.on("click", function() {
jQuery(this).trigger("stop.sparkle");
});
//当浏览器的窗口大小改变时,还可以调整画布的大小并重新定位
var timer;
jQuery(window).on("resize", function(){
clearTimeout(timer);
timer = setTimeout(function(){
jQuery("body").trigger("resize.sparkle");
},200);
});