使用插件jquery.confetti.js在网页中实现飞舞五彩纸屑示例

使用介绍

jquery.confetti.js插件的使用方法很简单，可以直接使用标记方式，也可以脚本调用方式，如下是两种方式的简单介绍。
方法一，标签方式:

<button id="startConfetti"></button>
<button id="stopConfetti"></button>
<button id="restartConfetti"></button>

这里的ID是固定的，是因为插件本身已经将ID值写死，不能变，要更改就需要修改插件源码，所以标签方式不是很灵活。

方法二，脚本方式：

$.confetti.start();
$.confetti.stop();
$.confetti.restart();

脚本方式就比较灵活了，可以使用任意标签进行调用触发纸屑方法。

本站示例：

本站提供示例使用了方法二，脚本方式，具体如下（bootstrap只是作为页面布局使用）：
1.引入依赖

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery.confetti.js"></script>

2.CSS样式

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color:purple;
    color:#fff;
}
h1{
    font-size:20px;
    text-align:center;
    margin-top: 90px;
    margin-bottom: 30px;
}
canvas {
    display: block;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
.btn-wrapper {
    text-align: center;
    z-index:99;//这个值这个很重要,不然按钮点不动
}

3.HTML标签

<div class="container">
    <h1>使用插件jquery.confetti.js在网页中实现飞舞五彩纸屑示例</h1>
    <div class="btn-wrapper">
        <button class="btn btn-default" id="btnStart">启动</button>
        <button class="btn btn-danger" id="btnStop">停止</button>
        <button class="btn btn-success" id="btnRestart">重启</button>
    </div>
</div>

4、JavaScript脚本，初始化

$(function () {
    $('#btnStart').click(function(){
        $.confetti.start();
    });
    $('#btnStop').click(function(){
        $.confetti.stop();
    });
    $('#btnRestart').click(function(){
        $.confetti.restart();
    });
    //网页加载完成时，默认启动
    $('#btnStart').click();
});

这样就完成了使用插件jquery.confetti.js实现飞舞五彩纸屑的示例。