快乐小demo-JS实现烟花特效（程序员表白必备）

最新推荐文章于 2024-09-14 09:16:59 发布

火腿肠烧烤大赛冠军

最新推荐文章于 2024-09-14 09:16:59 发布

阅读量3.4k

点赞数 5

分类专栏：快乐小demo 文章标签： js javascript html5 html css3

本文链接：https://blog.csdn.net/s2422617864/article/details/108649226

版权

快乐小demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果如图（动态效果自行执行）

在这里插入图片描述

代码如下直接cv即可（欢迎指正）

不懂的地方也可以评论问我

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 80%;
            height: 600px;
            border: 1px red solid;
            position: relative;
            margin: 20px auto;
            cursor: pointer;
            background: black;
        }

        .fire {
            background: red;
            position: absolute;
            /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
            bottom: 0px;
            width: 6px;
            height: 6px;

        }

        .small-fire {
            width: 10px;
            height: 10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="container">

    </div>
    <script>
        var oCont = document.querySelector('#container');
        oCont.onclick = function (e) {
            // 创建对象保存点击位置
            var pos = {};
            pos.x = e.offsetX;
            pos.y = e.offsetY;
            // console.log(pos);
            new Fire(oCont, pos);
        };
        function Fire(oCont, pos) {
            this.oCont = oCont;
            this.pos = pos;
            var oDivB = document.createElement('div');
            oDivB.className = 'fire';
            // 计算左侧距离
            oDivB.style.left = this.pos.x + 'px';
            oDivB.style.backgroundColor = this.getColor();
            //节点的追加
            this.oCont.append(oDivB);
            //避免this指向全局
            var that = this;
            this.move(oDivB, { top: this.pos.y }, function () {
                // 回调函数清除大的引出小的
                oDivB.remove();
                that.smallFire();
            })
        }
        //小烟花
        Fire.prototype.smallFire = function () {
            for (var i = 0; i < 12; i++) {
                var oDivS = document.createElement('div');
                //添加小礼花类名
                oDivS.className = 'small-fire';
                oDivS.style.backgroundColor = this.getColor();
                this.oCont.append(oDivS);
                //获取初始位置（鼠标点击位置）
                oDivS.style.top = this.pos.y + 'px';
                oDivS.style.left = this.pos.x + 'px';
                //设置偏移位置一横一竖1q一个终点位置
                var left = this.rand(0, this.oCont.offsetWidth - oDivS.offsetWidth);
                var top = this.rand(0, this.oCont.offsetHeight - oDivS.offsetHeight)
                that = this;
                (function (ele) {
                    that.move(ele, {
                        left: left,
                        top: top
                    }, function () {
                        ele.remove();
                    });

                })(oDivS)
            }
        }
        // 移动函数（大小烟火的移动）-----------------------------------
        Fire.prototype.move = function (fireObj, json, callBack) {
            // // 设置开关r
            // var flag = true;
            var times = '';
            // 避免定时器累计
            clearInterval(times);
            that = this;
            times = setInterval(() => {
                for (var attr in json) {
                    var nowSize = parseInt(that.getStyle(fireObj, attr));
                    var speed = (json[attr] - nowSize) / 7;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    //为什么这里不加position（因为上面设置过了直接添加的属性）
                    fireObj.style[attr] = speed + nowSize + 'px';
                    if (json[attr] == nowSize) {
                        clearInterval(times);
                        callBack();
                    }

                }
            }, 30);
        }



        // __________随机颜色的获取————————————————————————————
        Fire.prototype.getColor = function () {
            var str = '#';
            for (var i = 0; i < 6; i++) {
                str += (Math.round(Math.random() * 16)).toString(16);
            }
            return str;
        }

        // ================获取内联样式=============================
        Fire.prototype.getStyle = function (ele, attr) {
            if (ele.currentStyle) {
                return ele.currentStyle[attr];
            } else {
                return getComputedStyle(ele, false)[attr];
            }
        }
        /******随机数的生成*******/
        Fire.prototype.rand = function (min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        // console.log(getColor());
    </script>
</body>

</html>