jparticles
Version:
A succinct, efficient, and lightweight Canvas plugin library for building some cool particle effects.
70 lines (69 loc) • 2.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<style>
.demo {
width: 70%;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
}
.btn-box {
text-align: center;
}
.btn {
margin: 0 5px;
font-size: 20px;
}
.rebuild {
margin: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="instance">
<div class="demo"></div>
<div class="btn-box">
<button class="btn btn-primary" type="button" data-open>
open
</button>
<button class="btn btn-danger" type="button" data-pause>
pause
</button>
</div>
<div class="rebuild">
<div class="btn btn-default">
重建粒子特效，性能测试
</div>
</div>
</div>
<script src="../production/jparticles.js"></script>
<script src="../production/particle.js"></script>
<script src="js/event.js"></script>
<script>
// 暂停的时候被摧毁不触发 onDestroy 事件
var i = 0;
function build() {
console.log(++i);
bind('#instance', function () {
var effect = new JParticles.particle('#instance .demo');
effect.onDestroy(function () {
console.log('1 - Canvas has been removed!!!');
}, function () {
console.log('2 - Canvas has been removed!!!');
});
effect.onDestroy(function () {
console.log('3 - Canvas has been removed!!!');
});
return effect;
});
}
build();
document.getElementsByClassName('rebuild')[0].onclick = build;
</script>
</body>
</html>