【HTML+CSS+JavaScript】实现鼠标点击烟花效果

【HTML+CSS+JavaScript】实现鼠标点击烟花效果（爆炸型、心型、圆形）

本文主要讲解三种烟花效果（爆炸型、心型、圆形），文章末尾附有完整的代码和图片获取链接。

一. 效果图

效果图(一) - 心型：

效果图(二) - 圆型：

效果图(三) - 爆炸型：

二. 鼠标点击烟花效果 - 心型实现代码

(1) HTML部分代码

<!-- 引入外部的js代码 -->
<script type="text/javascript" src="buffermove1.js"></script> 

(2) CSS部分代码

* {
    padding: 0px;
    margin: 0px;
}

body {
    background: #000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置
    this.x = x;
    this.y = y;
    var that = this;
    //1.创建烟花。
    this.ceratefirework = function() {
        this.firework = document.createElement('div'); //整个构造函数内部都可以使用
        this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;
        document.body.appendChild(this.firework);
        this.fireworkmove();
    };
    //2.烟花运动和消失
    this.fireworkmove = function() {
        buffermove(this.firework, {
            top: this.y
        }, function() {
            document.body.removeChild(that.firework); //烟花消失，碎片产生
            that.fireworkfragment();
        });
    };
    //3.创建烟花的碎片
    this.fireworkfragment = function() {
        var num = this.ranNum(30, 60); //盒子的个数
        this.perRadio = 2 * Math.PI / num; //弧度
        for (var i = 0; i < num; i++) {
            this.fragment = document.createElement('div');
            this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
            document.body.appendChild(this.fragment);
            this.fireworkboom(this.fragment, i); //将当前创建的碎片传过去，方便运动和删除
        }
    }
    //4.碎片运动
    this.fireworkboom = function(obj, i) { //obj:创建的碎片
        var r = 0.1;
        obj.timer = setInterval(function() { //一个盒子运动
            r += 0.4;
            if (r >= 10) {
                clearInterval(obj.timer);
                document.body.removeChild(obj);
            }
            obj.style.left = that.x + 16 * Math.pow(Math.sin(that.perRadio * i), 3) * r + 'px';
            obj.style.top = that.y - (13 * Math.cos(that.perRadio * i) - 5 * Math.cos(2 * that.perRadio * i) - 2 * Math.cos(3 * that.perRadio * i) - Math.cos(4 * that.perRadio * i)) * r + 'px';
        }, 20);
    }
    //随机方法
    this.ranNum = function(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    };
}
document.onclick = function(ev) {
    var ev = ev || window.event;
    new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

三. 鼠标点击烟花效果 - 圆型实现代码

(1) HTML部分代码

<!-- 引入外部的js代码 -->
<script type="text/javascript" src="buffermove1.js"></script> 

(2) CSS部分代码

* {
    padding: 0px;
    margin: 0px;
}

body {
    background: #000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置
    this.x = x;
    this.y = y;
    var that = this;
    //1.创建烟花。
    this.ceratefirework = function() {
        this.firework = document.createElement('div'); //整个构造函数内部都可以使用
        this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;
        document.body.appendChild(this.firework);
        this.fireworkmove();
    };
    //2.烟花运动和消失
    this.fireworkmove = function() {
        var that = this;
        buffermove(this.firework, {
            top: this.y
        }, function() {
            document.body.removeChild(that.firework); //烟花消失，碎片产生
            that.fireworkfragment();
        });
    };
    //3.创建烟花的碎片
    this.fireworkfragment = function() {
        var num = this.ranNum(30, 60); //盒子的个数
        this.perRadio = 2 * Math.PI / num; //弧度
        for (var i = 0; i < num; i++) {
            this.fragment = document.createElement('div');
            this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
            document.body.appendChild(this.fragment);
            this.fireworkboom(this.fragment, i); //将当前创建的碎片传过去，方便运动和删除
        }
    }
    //4.碎片运动
    this.fireworkboom = function(obj, i) { //obj:创建的碎片
        var r = 10;
        obj.timer = setInterval(function() { //一个盒子运动
            r += 4;
            if (r >= 200) {
                clearInterval(obj.timer);
                document.body.removeChild(obj);
            }
            obj.style.left = that.x + Math.sin(that.perRadio * i) * r + 'px';
            obj.style.top = that.y + Math.cos(that.perRadio * i) * r + 'px';
        }, 20);
    }
    //随机方法
    this.ranNum = function(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    };
}
document.onclick = function(ev) {
    var ev = ev || window.event;
    new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

四. 鼠标点击烟花效果 - 爆炸型实现代码

(1) HTML部分代码

<!-- 引入外部的js代码 -->
<script type="text/javascript" src="buffermove1.js"></script> 

(2) CSS部分代码

* {
    padding: 0px;
    margin: 0px;
}

body {
    background: #000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

(3) 内部的JavaScript部分代码

//this绑定的属性可以在整个构造函数内部都可以使用，而变量只能在函数内部使用。
function Fireworks(x, y) { //x,y鼠标的位置
    this.x = x;
    this.y = y;
    var that = this;
    //1.创建烟花。
    this.ceratefirework = function() {
        this.firework = document.createElement('div'); //整个构造函数内部都可以使用
        this.firework.style.cssText = `width:5px;height:5px;background:#fff;position:absolute;left:${this.x}px;top:${document.documentElement.clientHeight}px;`;
        document.body.appendChild(this.firework);
        this.fireworkmove();
    };
    //2.烟花运动和消失
    this.fireworkmove = function() {
        buffermove(this.firework, {
            top: this.y
        }, function() {
            document.body.removeChild(that.firework); //烟花消失，碎片产生
            that.fireworkfragment();
        });
    };
    //3.创建烟花的碎片
    this.fireworkfragment = function() {
        for (var i = 0; i < this.ranNum(30, 60); i++) {
            this.fragment = document.createElement('div');
            this.fragment.style.cssText = `width:5px;height:5px;background:rgb(${this.ranNum(0, 255)},${this.ranNum(0, 255)},${this.ranNum(0, 255)});position:absolute;left:${this.x}px;top:${this.y}px;`;
            document.body.appendChild(this.fragment);
            this.fireworkboom(this.fragment); //将当前创建的碎片传过去，方便运动和删除
        }
    }

    //4.碎片运动
    this.fireworkboom = function(obj) { //obj:创建的碎片

        //设点速度(值不同，正负符号不同)
        var speedx = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));
        var speedy = parseInt((Math.random() > 0.5 ? '-' : '') + this.ranNum(1, 15));

        //初始速度
        var initx = this.x;
        var inity = this.y;
        obj.timer = setInterval(function() { //一个盒子运动
            initx += speedx;
            inity += speedy;
            if (inity >= document.documentElement.clientHeight) {
                clearInterval(obj.timer);
                document.body.removeChild(obj);
            }
            obj.style.left = initx + 'px';
            obj.style.top = inity + 'px';
        }, 20);

    }

    //随机方法
    this.ranNum = function(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    };
}


document.onclick = function(ev) {
    var ev = ev || window.event;
    new Fireworks(ev.clientX, ev.clientY).ceratefirework();
}

五. 共同引用的JavaScript部分代码

function getstyle(obj, attr) {
    if (window.getComputedStyle) {
        //标准
        return getComputedStyle(obj)[attr]
    } else {
        //IE
        return obj.currentStyle[attr]
    }
}

function buffermove(obj, json, fn) {
    var speed = 0
    clearInterval(obj.timer)
    obj.timer = setInterval(function() {
        var bstop = true
        for (var attr in json) {
            var currentvalue = 0
            if (attr === 'opacity') {
                currentvalue = Math.round(getstyle(obj, attr) * 100)
            } else {
                currentvalue = parseInt(getstyle(obj, attr))
            }
            speed = (json[attr] - currentvalue) / 10
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
            if (currentvalue != json[attr]) {
                if (attr === 'opacity') {
                    obj.style.opacity = (currentvalue + speed) / 100
                    obj.style.filter = 'alpha(opacity:' + (currentvalue + speed) + ')'
                } else {
                    obj.style[attr] = currentvalue + speed + 'px'
                }
                bstop = false
            }
        }
        if (bstop) {
            clearInterval(obj.timer)
            fn && fn()
        }
    }, 5)
}

六. 完整的代码和图片获取

注：细心地网友估计已经发现三种效果的CSS和HTML这两部分的代码其实是一样的。

完整的代码和图片获取方式：

链接：https://pan.baidu.com/s/16kbVr5pOcBqxdCRfs-GJnA?pwd=yhxg 
提取码：yhxg